Skip to main content

Limitations of client-side rendering

The browser must support the WebCodecs API. See Browser support for minimum browser versions.

Unlike server-side rendering, where a full screenshot it taken, in client-side rendering the layout and styles of your video are being emulated and drawn to a canvas.

It is not feasible to support all CSS properties and factors affecting the visual style of a page, so only the most important styling primitives are supported.

info

If the optional HTML-in-canvas capture mode is active, these CSS limitations don't apply because a full screenshot is taken instead.

Supported CSS styles​

Positioning and layouting properties​

Properties such as margin, left, display, width, height, flex, flex-direction affect the position and size of the element. Those are all supported because Remotion uses .getBoundingClientRect() to obtain the position and size of the element.

The overflow property is supported.
The object-fit property is supported.
The object-position property is supported.
The image-rendering: pixelated value is supported for images, canvases and raster backgrounds.

The z-index property and flex/grid order are partially supported for sibling stacking contexts. See Z-indexing.

Transformations​

Inline transform and transition priorities are supported. Variable-based transition shorthands combined with individual transition overrides are partially supported: unresolved values may be lost.

The CSS transform property is supported.
The transform-origin property is supported.
The opacity property is supported, including root SVG elements.
The scale, rotate and translate transformations are supported.
The perspective property is not supported.
The perspective-origin property is not supported.
The transform-style property is not supported (defaults to preserve-3d, default in CSS is "flat").
The backface-visibility property is supported.

Backgrounds​

The background-color property is supported.
background-image with a linear gradient, a centered radial gradient or a single raster url() (same-origin, data: or blob:) is supported.
The background-size and background-position properties are supported.

image-rendering: pixelated is supported for raster URL backgrounds, including CSS scaling. Backgrounds requiring opacity or filter compositing can still differ from native output.

The background-repeat property is supported for raster url() backgrounds.
The background-clip property is supported.
Other background-image values and other background-* properties are not supported.

Borders and border radius​

The border, border-style, border-color, border-width properties are supported.
The border-radius property is supported, including different values for vertical and horizontal radii.
The corner-shape property is not supported.
The outline property is supported.

Text properties​

The color property is supported.
The -webkit-text-fill-color property is supported.
The font-family property is supported.
The font-size property is supported.
The font-style property is supported.
The font-weight property is supported.
The line-height property is supported.
The letter-spacing property is supported.
The word-spacing property is supported.
The text-transform property is supported.
The text-rendering property is supported.
The font-variant-caps property is supported.
The font-kerning property is supported.
The font-stretch property is supported. Percentage values are approximated to the closest named stretch supported by the Canvas API.
The direction HTML attribute is supported.
The writing-mode property is not supported.
The text-decoration property is supported for solid, dotted, dashed, double, and wavy text-decoration-style values on underline, overline, and line-through lines with text-decoration-color and text-decoration-thickness.
text-decoration-thickness supports percentages and CSS math expressions. Font-derived thickness and minimum device-pixel thickness may differ from native output.
wavy lines are approximated with Bézier curves and may not exactly match the browser-native wave shape. Pixel-perfect line positions are not supported.
The text-shadow property is supported.
The -webkit-text-stroke, -webkit-text-stroke-color, -webkit-text-stroke-width, paint-order properties are supported.

Text pixels may differ on transparent output, including LCD text on Linux Chromium. Opaque output against black is supported with transparent: false in renderStillOnWeb(), renderFramesOnWeb() and renderMediaOnWeb().

Inline SVG stylesheet state​

The CSSStyleSheet.disabled property is supported for inline SVG stylesheets.

Web fonts inside SVG​

Fonts loaded through @remotion/fonts or @remotion/google-fonts are embedded automatically when they are used by <text>, <tspan>, or <textPath> inside an <svg> from v4.0.525.

Registered fonts are also embedded for SVG CDATA, including content inside <a> and <tspan> elements. Native glyph rasterization can differ across engines.

Removing and re-adding script-loaded SVG font families is supported. Removing or replacing individual faces while another face of the same family remains is not fully supported.

External CSS selection of font-family, font-size, font-style, font-weight, and font-stretch is supported for SVG text. Other external CSS properties and external font selection on <use> templates are not supported. Non-CSS <style> elements and foreign-namespace XML metadata outside foreignObject do not affect SVG text styling.

Fonts loaded through CSS @font-face, Google Fonts CSS imports, or the browser's FontFace API are not supported. Text inside <foreignObject> is not supported.

SVG-local style:empty and style[media] selectors are partially supported, including uppercase and CSS-escaped :empty spellings, empty and all media attributes, and wildcard or namespaced media attributes. Empty stylesheets may become nonempty when there is no earlier active stylesheet or later CSSOM rules prevent preserving their emptiness.

Titled registered-font stylesheets support active and inactive media evaluated against the owning document, including after viewport changes. Empty sheets in a preferred titled set preserve :empty matching, and SVG-local CSSOM rules retain their selector matching. Native text pixels and titled-stylesheet paint selection may differ; WebKit and Firefox may select a different face.

SVG-local selector preservation is not supported for stylesheets containing @import or @scope rules. Their names inside comments, strings, URLs or custom-property values do not impose this limitation, including escaped URL names and unquoted URLs containing brackets or braces.

Shadows​

Basic box-shadow are supported.
inset shadows are not supported.
"Spread radius" is not supported.

Masks​

mask-image with a linear gradient is supported.

mask-image with raster url() sources (same-origin, data: or blob:) is supported for alpha masks.
The mask-size, mask-position and mask-repeat properties are partially supported: only border-box origin/clip and two-value positions are supported. Browser-supported CSS math expressions in mask-size are supported. Fractional raster-mask sampling can differ from native output.

The mask-composite values add, subtract, intersect and exclude are supported for multiple raster url()/none layers. Legacy composite keywords that the browser does not normalize to these values are not supported.

image-set() masks, cross-origin URLs, SVG masks, mixed or multiple gradient layers, luminance masks and space / round mask repetition are not supported. Unsupported mask-image functions cause an export error.

Filters​

The filter property is supported with the following filter functions:

  • blur() is supported.
  • brightness() is supported.
  • contrast() is supported.
  • drop-shadow() is supported.
  • grayscale() is supported.
  • hue-rotate() is supported.
  • invert() is supported.
  • opacity() is supported.
  • saturate() is supported.
  • sepia() is supported.
  • Filter-established containing blocks for absolutely and fixed-positioned descendants are supported.
  • Multiple combined filters are supported.
  • url() can reference a same-document SVG <filter> using feColorMatrix, feGaussianBlur, and feOffset with primitiveUnits="userSpaceOnUse". Expanded filter regions, userSpaceOnUse and objectBoundingBox filter units, and render scaling are supported in Chrome. Color-only filter functions such as brightness() can follow the URL effect. External filter documents, inherited filters, other primitives, and percentage primitive subregions are not supported.
warning

Filters are not supported in Safari/WebKit. Use Chrome or Firefox for filter support.

Blending​

The mix-blend-mode property is supported from v4.0.540 with all blend modes. Stacking contexts created by properties such as opacity, transform or isolation: isolate limit what an element blends with, as in the browser.

The background-blend-mode property is supported for a single linear gradient blended with the element's background color.

Supported elements​

The following Remotion components are supported:

The <Video> from @remotion/media is supported.
The <Audio> from @remotion/media is supported.
<Img> is supported, including SVG data URIs and SVG files.
SVG blob URLs preserve file-source content for uncropped object-fit: fill and contain images. Cropped SVG blob URLs and exact native SVG pixel parity remain limited. <Gif> from @remotion/gif is supported.
<Rive> from @remotion/rive is supported.
<Lottie> from @remotion/lottie is supported.
<ThreeCanvas> from @remotion/three is supported.
<SkiaCanvas> from @remotion/skia is supported.
<AnimatedImage> is supported when rendering in Chrome.
<HtmlInCanvas> is supported when the component itself is supported, including its onPaint and onInit callbacks. The optional HTML-in-canvas capture mode supports nested capture in Chrome 157.0.8080.0 or newer and falls back to the built-in DOM composer in older versions.
<OffthreadVideo> is not supported.
→ Use <Video> instead.
<Html5Video> is not supported.
→ Use <Video> instead.
<Html5Audio> is not supported.
→ Use <Audio> instead.
<AnimatedEmoji> from @remotion/animated-emoji is not supported.
→ Use <Lottie> instead.

Clip path​

The clip-path property is partially supported:

  • clip-path: polygon() is supported.
  • clip-path: path() is supported.
  • clip-path: circle() is supported.
  • clip-path: ellipse() is supported.
  • clip-path: inset() is supported.
  • clip-path: url() is partially supported for same-document SVG <clipPath> elements containing one non-rounded <rect>, <polygon>, or <path>, or multiple non-rounded rectangles. userSpaceOnUse, objectBoundingBox, SVG transform attributes, and clip-rule are supported. External documents, mixed multiple shapes, and nested references are not supported. Diagonal and curved edges may differ from browser rendering.

Unsupported styles​

All styles not explicitly mentioned are not supported. Here is a selection of unsupported styles:

  • backdrop-filter
  • Any other property not listed in this document.

Over time, we will support more elements and styles. We'll prioritize the most demanded ones.
See how you can contribute to add more supported styles.

Z-indexing​

z-index and flex/grid order are partially supported when all direct siblings form stacking contexts inside a 2D stacking context. Mixed normal-flow and positioned elements, descendants in an ancestor's stacking context, and 3D depth ordering are not supported.

To control the order of the elements, order your elements from back to front.

The image is drawn on top of the text in client-side rendering
const MyComp = () => (
  <div style={{position: 'relative'}}>
    <div style={{position: 'absolute', top: 0, left: 0}}>Label</div>
    <Img src={staticFile('image.png')} />
  </div>
);

Video and media constraints​

The limitations from @remotion/media apply.

Media fetches can resume after an interruption when the browser reports being offline. Failed reads of an existing response are not recovered. Renders can still be canceled while offline.

Single concurrency​

There is no multithreading for client-side rendering.
However, it is fundamentally more efficient because there is less interprocess communication.
In addition, in the headful browser, GPU is usually available, which brings performance benefits.

Page responsiveness​

By default, renderMediaOnWeb() tries to free the event loop between expensive render phases to keep the page responsive. Set pageResponsiveness to "disabled" to prioritize render speed instead.

Higher responsiveness settings make renders slower.

Background tabs​

When the browser tab running the render is moved to the background, browsers throttle requestAnimationFrame to conserve resources. This could cause rendering to pause or slow down significantly.

Remotion automatically works around this by using a Web Worker timer as a fallback. When the tab is backgrounded and RAF is throttled, the Worker timer takes over to keep the render progressing.

The Worker timer is less precise than requestAnimationFrame, so rendering in a background tab will be slower than in a foreground tab. For best performance, keep the tab visible during rendering.

See also​