Search
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.
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