CSS Styles Support

We often add new CSS styles via our properties. However, browser support for these properties may vary in Framer. Here we will provide an overview of the compatibility of modern styles added to Framer.

Text Balance

The Balance property on Text layers allows you to control the wrapping, and let the browser try to balance it for you. This property is supported in all modern browsers, but there are a few small differences in how many lines they support. See a few examples below. Note that this might change over time, as browsers like Chrome could decide to support more lines.

  • Chrome: up to 6 wrapping lines max.

  • Safari: infinite wrapping lines.

  • Firefox: 10 wrapping lines max.


Masking

Masking generally works perfectly in most modern browsers, and has so for a while. See a full list of browser support below. Other than that, there a few specific masking setups where Safari does not have complete support just yet: GIFs and Luminance masks with PNGs.

Safari combinations:

  • GIFs as Masks will not play in Safari. Use with caution.

  • PNGs as Masks with Luminance will not work in Safari. To work around this, you can use SVG instead, or rely on Alpha masking with PNGs instead of Luminance.

Some masking features are more modern, and won’t work in older versions of browsers such as Chrome, Safari, and Firefox, like the Composite property. The Composite property will only work in Chrome 120+, whereas basic alpha masking with gradients will work in much earlier versions. For full masking support, see the list below.

  • Chrome: 120+

  • Chrome on Android: 123+

  • Edge: 120+

  • Safari: 15.4+

  • Safari on iOS: 15.4+

  • Firefox: 53+

  • Opera: 106+

  • Samsung Internet: 24+

  • Opera Mini: no support


Overscroll

The overscroll property defines what happens when reaching the boundary of a scrollable area. In Framer, a scrollable area could be a Frame or Stack with Overflow set to Scroll. It’s especially useful for mobile navigations, where it can be used to prevent the background from being scrolled while your scrollable menu is open. It’s currently (December 2023) supported in the following browser versions. The most recent browser to support it is Safari, which started supporting it in September 2022. For the latest overview at any time, see here.

  • Chrome: 65+

  • Chrome on Android: 111

  • Edge: 79+

  • Safari: 16+

  • Safari on iOS: 16+

  • Firefox: 59+

  • Opera: 52+

  • Opera Mobile: 73

  • Samsung Internet: 8.2+

  • Android Browser: 119

  • Firefox for Android: 119