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 an outer div with overflow: hidden, border-radius, and position: relative.
- Apply transform: translateZ(0) or will-change: transform to the wrapper to trigger proper clipping.
- Use SVG rendering instead of canvas if possible.
- If issues persist, use an embed element with isolation: isolate on the wrapper.
- Check for conflicting Webflow interactions or transform styles that may affect overflow behavior.
You're facing a common issue where Lottie animations overflow the rounded corners of a div, especially on mobile devices, even when using overflow: hidden. This happens because Lottie animations use canvas or SVG rendering, which can behave inconsistently across browsers and devices.
1. Use Overflow Hidden on a Wrapper Div
- Instead of applying overflow: hidden on the Lottie animation’s direct container, create an additional wrapper div around it.
- Set this outer wrapper with styles:
- border-radius matching your design
- overflow: hidden
- position: relative
2. Apply Transform or Will-Change CSS Hack
- In some cases, mobile browsers ignore overflow: hidden unless a new stacking context is created. Try forcing one with:
- Add transform: translateZ(0) or
- Set will-change: transform to the outer wrapper div
These styles help mobile browsers properly honor the overflow setting.
3. Set the Lottie File to SVG Renderer (if supported)
- If you're using bodymovin or uploading to Webflow as a Lottie JSON, ensure the animation uses SVG rendering instead of vector/canvas rendering if possible.
- SVG renderers respect CSS overflow better than canvas on many mobile browsers.
4. Use Embed Element with CSS Isolation (Advanced)
- If nothing else works, upload the Lottie via an Embed HTML element, wrap it in a div, and apply CSS isolation/containment:
- Add
style="isolation: isolate"to the wrapper div - This can help avoid render bleed from inside the Lottie
5. Check for Webflow Site Styles or Interactions
- Sometimes page-level interactions or animations might cause reflows or transforms that break mobile overflow behavior.
- Review interactions to ensure no conflicting animations or hidden transform layers.
Summary
To prevent Lottie animations from overflowing rounded corners on mobile:
- Wrap the Lottie in an extra div with overflow: hidden and matching border-radius
- Apply transform: translateZ(0) to trigger proper clipping
- Prefer SVG rendering if possible
- Use embed + isolation techniques if you're still seeing issues
These steps usually resolve overflow bugs specific to Lottie content on mobile browsers.