Are other users experiencing lottie animations disappearing on Chrome with Webflow?
TL;DR
- Switch Lottie renderer to "canvas" in Webflow settings to ensure stability in newer Chrome versions.
- Set fixed width and height, enable "Preserve aspect ratio," and avoid using "Display: none" in interactions to prevent rendering issues.
- Test in other browsers and incognito mode to rule out Chrome-specific or extension-related problems.
Yes, some Webflow users have reported issues with Lottie animations disappearing or not rendering properly in Chrome. This behavior often stems from recent Chrome updates affecting how Lottie and SVGs are handled.
1. Check Chrome Version Compatibility
- Chrome Version 112+ introduced changes in rendering behavior, particularly around hardware acceleration and SVG rendering.
- Lottie animations using SVG renderer can sometimes vanish on scroll or when inside interactions.
2. Switch to Canvas Renderer (If Possible)
- In your Lottie settings inside Webflow, try setting the Renderer to “canvas” instead of “svg”.
- While canvas renderer may not support all Lottie features, it tends to be more stable in recent Chrome versions.
3. Ensure “Preserve Aspect Ratio” is Enabled
- Select your Lottie element, then check the “Preserve aspect ratio” setting in the element’s size settings.
- Missing this setting can cause rendering issues in some layouts, especially on Chrome.
4. Use Fixed Dimensions
- Chrome sometimes fails to render Lottie animations with percentage-based widths/heights.
- Set a fixed width and height (e.g., 300px by 300px) for the Lottie element in the Style panel and test again.
5. Avoid Display: None Within Interactions
- If you hide the Lottie animation using Display: none within interactions, it may not redraw when shown again.
- Use Visibility: hidden or Opacity: 0 instead to keep the Lottie animation loaded in the DOM.
6. Test on Other Browsers and Devices
- If the animation works fine in Safari or Firefox but fails in Chrome, the issue likely originates from Chrome-specific rendering changes.
- Also try incognito or guest mode to rule out browser extensions interfering.
Summary
Lottie animations disappearing in Chrome is a known issue, especially with SVG renderer and recent Chrome updates. To fix it, try switching to canvas, use fixed sizes, avoid Display: none, and ensure Preserve aspect ratio is active. Monitor LottieFiles forums and Chrome release notes for future improvements.