Chapter 193: Limitations of client-side rendering

Core Idea

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

Key Concepts

• Supported CSS styles
• Positioning and layouting properties
• Transformations
• Backgrounds
• Borders and border radius
• Text properties
• Shadows
• Masks

Code Examples

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>
  );
};

• What it demonstrates: Usage pattern for Limitations of client-side rendering from the official docs.

Key Takeaways

1. Understand supported css styles when working with Limitations of client-side rendering.
2. Understand positioning and layouting properties when working with Limitations of client-side rendering.
3. Understand transformations when working with Limitations of client-side rendering.
4. Understand backgrounds when working with Limitations of client-side rendering.
5. Understand borders and border radius when working with Limitations of client-side rendering.

Connects To

• Animatedimage: related page in the Assets & Media section.
• Delaying: related page in the Assets & Media section.
• Exporting: related page in the Assets & Media section.