ContextQMD
Back to Remotion

Limitations of client-side rendering

packages/docs/docs/client-side-rendering/limitations.mdx

4.0.45710.7 KB
Original Source

:::warning Experimental feature - expect bugs and breaking changes at any time.
Track progress on GitHub and discuss in the #web-renderer channel on Discord. :::

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 HTML-in-canvas flag is enabled and 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 <a style={{color: 'green'}}>supported</a> because Remotion uses .getBoundingClientRect() to obtain the position and size of the element.

The overflow property is <a style={{color: 'green'}}>supported</a>.
The object-fit property is <a style={{color: 'green'}}>supported</a>.
The object-position property is <a style={{color: 'red'}}>not supported</a> and content is always centered within its container.

Transformations

The CSS transform property is <a style={{color: 'green'}}>supported</a>.
The transform-origin property is <a style={{color: 'green'}}>supported</a>.
The opacity property is <a style={{color: 'green'}}>supported</a>.
The scale, rotate and translate transformations are <a style={{color: 'green'}}>supported</a>.
The perspective property is <a style={{color: 'red'}}>not supported</a>.
The perspective-origin property is <a style={{color: 'red'}}>not supported</a>.
The transform-style property is <a style={{color: 'red'}}>not supported</a> (defaults to preserve-3d, default in CSS is "flat").
The backface-visibility property is <a style={{color: 'green'}}>supported</a>.

Backgrounds

The background-color property is <a style={{color: 'green'}}>supported</a>.
background-image with a linear gradient is <a style={{color: 'green'}}>supported</a>.
The background-clip property is <a style={{color: 'green'}}>supported</a>.
Other background-image values and other background-* properties are <a style={{color: 'red'}}>not supported</a>.

Borders and border radius

The border, border-style, border-color, border-width properties are <a style={{color: 'green'}}>supported</a>.
The border-radius property is <a style={{color: 'green'}}>supported</a>, including different values for vertical and horizontal radii.
The corner-shape property is <a style={{color: 'red'}}>not supported</a>.
The outline property is <a style={{color: 'green'}}>supported</a>.

Text properties

The color property is <a style={{color: 'green'}}>supported</a>.
The -webkit-text-fill-color property is <a style={{color: 'green'}}>supported</a>.
The font-family property is <a style={{color: 'green'}}>supported</a>.
The font-size property is <a style={{color: 'green'}}>supported</a>.
The font-style property is <a style={{color: 'green'}}>supported</a>.
The font-weight property is <a style={{color: 'green'}}>supported</a>.
The line-height property is <a style={{color: 'green'}}>supported</a>.
The letter-spacing property is <a style={{color: 'green'}}>supported</a>. The word-spacing property is <a style={{color: 'green'}}>supported</a>. The text-transform property is <a style={{color: 'green'}}>supported</a>. The text-rendering property is <a style={{color: 'green'}}>supported</a>. The font-variant-caps property is <a style={{color: 'green'}}>supported</a>. The font-kerning property is <a style={{color: 'green'}}>supported</a>. The font-stretch property is <a style={{color: 'green'}}>supported</a>. The direction HTML attribute is <a style={{color: 'green'}}>supported</a>. The writing-mode property is <a style={{color: 'red'}}>not supported</a>. The text-decoration property is <a style={{color: 'red'}}>not supported</a>. The text-shadow property is <a style={{color: 'green'}}>supported</a>. The -webkit-text-stroke, -webkit-text-stroke-color, -webkit-text-stroke-width, paint-order properties are <a style={{color: 'green'}}>supported</a>.

Shadows

Basic box-shadow are <a style={{color: 'green'}}>supported</a>.
inset shadows are <a style={{color: 'red'}}>not supported</a>.
"Spread radius" is <a style={{color: 'red'}}>not supported</a>.

Masks

mask-image with a linear gradient is <a style={{color: 'green'}}>supported</a>.
Other mask-image values are <a style={{color: 'red'}}>not supported</a>.

Filters

The filter property is <a style={{color: 'green'}}>supported</a> with the following filter functions:

  • blur() is <a style={{color: 'green'}}>supported</a>.
  • brightness() is <a style={{color: 'green'}}>supported</a>.
  • contrast() is <a style={{color: 'green'}}>supported</a>.
  • drop-shadow() is <a style={{color: 'green'}}>supported</a>.
  • grayscale() is <a style={{color: 'green'}}>supported</a>.
  • hue-rotate() is <a style={{color: 'green'}}>supported</a>.
  • invert() is <a style={{color: 'green'}}>supported</a>.
  • opacity() is <a style={{color: 'green'}}>supported</a>.
  • saturate() is <a style={{color: 'green'}}>supported</a>.
  • sepia() is <a style={{color: 'green'}}>supported</a>.
  • Multiple combined filters are <a style={{color: 'green'}}>supported</a>.
  • url() referencing inline SVG filters is <a style={{color: 'red'}}>not supported</a>.

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

Supported elements

The following Remotion components are supported:

The <Video> from @remotion/media is <a style={{color: 'green'}}>supported</a>.
The <Audio> from @remotion/media is <a style={{color: 'green'}}>supported</a>.
`` is <a style={{color: 'green'}}>supported</a>.
<Gif> from @remotion/gif is <a style={{color: 'green'}}>supported</a>.
<Rive> from @remotion/rive is <a style={{color: 'green'}}>supported</a>.
<Lottie> from @remotion/lottie is <a style={{color: 'green'}}>supported</a>.
<ThreeCanvas> from @remotion/three is <a style={{color: 'green'}}>supported</a>.
<SkiaCanvas> from @remotion/skia is <a style={{color: 'green'}}>supported</a>.
<AnimatedImage> is <a style={{color: 'green'}}>supported</a> when rendering in Chrome.
<HtmlInCanvas> is <a style={{color: 'green'}}>supported</a> when the component itself is supported. <OffthreadVideo> is <a style={{color: 'red'}}>not supported</a>.
→ Use <Video> instead.
<Html5Video> is <a style={{color: 'red'}}>not supported</a>.
→ Use <Video> instead.
<Html5Audio> is <a style={{color: 'red'}}>not supported</a>.
→ Use <Audio> instead.
<AnimatedEmoji> from @remotion/animated-emoji is <a style={{color: 'red'}}>not supported</a>.
→ Use <Lottie> instead.

Clip path

The clip-path property is <a style={{color: 'green'}}>partially supported</a>:

  • clip-path: polygon() is <a style={{color: 'green'}}>supported</a>.
  • clip-path: path() is <a style={{color: 'green'}}>supported</a>.
  • clip-path: circle() is <a style={{color: 'green'}}>supported</a>.
  • clip-path: ellipse() is <a style={{color: 'green'}}>supported</a>.
  • clip-path: inset() is <a style={{color: 'green'}}>supported</a>.
  • clip-path: url() referencing SVG <clipPath> elements is <a style={{color: 'red'}}>not supported</a>.

Unsupported styles

All styles not explicitly mentioned are <a style={{color: 'red'}}>not supported</a>. Here is a selection of unsupported styles:

  • backdrop-filter
  • mix-blend-mode
  • background-blend-mode
  • z-index
  • 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

The CSS property z-index is not supported.
To control the order of the elements, order your elements from back to front.

tsx
import {AbsoluteFill} from 'remotion';

// ---cut---
const MyComp = () => {
  return (
    <AbsoluteFill>
      <AbsoluteFill>
        <svg viewBox="0 0 100 100">
          <rect x="0" y="0" width="100" height="100" fill="red" />
        </svg>
      </AbsoluteFill>
      <AbsoluteFill>
        <svg viewBox="0 0 100 100">
          <rect x="0" y="0" width="100" height="100" fill="blue" />
        </svg>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

Video and media constraints

The limitations from @remotion/media apply.

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.

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