How can I fix the issue of lottie animations overflowing the rounded corners of a div? I have already tried using the overflow hidden property and it only occurs on mobile devices when viewing the live site, not in Webflow preview.
TL;DR
- Wrap the Lottie animation in a div with
overflow: hiddenand matchingborder-radius, not on the Lottie itself. - Avoid using
transform,translate, or similar styles on parent elements to ensure proper clipping. - Set the Lottie render mode to SVG in Webflow settings if available.
- Use
clip-path: inset(...)on the wrapper for precise clipping if needed. - Test on real devices or DevTools mobile view, as Webflow Preview may not show mobile rendering issues.
Lottie animations overflowing rounded corners on mobile is typically due to how mobile browsers render canvas or SVG elements differently from desktop, especially when used with hardware acceleration. Even with overflow: hidden, mobile rendering may still leak Lottie content outside rounded containers.
1. Use an Additional Wrapper Div
- Create a new div wrapper around your Lottie animation.
- Set the wrapper’s
overflow: hiddenandborder-radiusto match your container’s rounded corners. - Important: Do not place the
border-radiusdirectly on the Lottie element itself—instead, place it on the wrapper.
2. Avoid Applying transform or translate on Parent Elements
- If any of the parent elements have
transform,translate,scale, orbackface-visibilityapplied, they can cause overflow: hidden to fail on mobile. - Remove or refactor these styles to avoid interfering with stacking and clipping.
3. Check Lottie Render Mode
- Go to Webflow > Lottie settings in the Element Panel.
- Set the Render Mode to 'SVG' if it’s currently ‘Canvas’ (if available in your Lottie file).
- SVG render mode often respects clipping and stacking contexts better than Canvas.
4. Force Clipping with clip-path
- If the above steps don’t work, apply a
clip-path: inset(...)style to the wrapper div to manually define the visible area. - Example: Add a custom style like
clip-path: inset(0 round 16px)to mirror yourborder-radius.
5. Test with Actual Mobile Devices or Browser Dev Tools
- Use Chrome DevTools mobile simulation or physical device testing, because animations may appear fine in Webflow Preview but break on live mobile.
- Custom mobile browser rendering (especially Safari on iOS) can differ.
Summary
To prevent Lottie animations from overflowing rounded corners on mobile: wrap the animation in a div with overflow: hidden and border-radius, avoid transforms on ancestor elements, set the Lottie to SVG render mode, and optionally use clip-path for stricter control. These steps address mobile-specific rendering issues that are not visible in Webflow Preview.
