Why do Lottie .JSON files render blurry in Chrome but crisp in Firefox in Webflow?
TL;DR
- Re-export the Lottie animation in SVG rendering mode using Bodymovin to ensure sharper display across browsers.
- In Webflow, avoid CSS upscaling and set explicit dimensions to prevent Chrome from rasterizing at a lower resolution, especially on high-DPI screens like Retina.
Lottie .JSON files can appear blurry in Chrome but crisp in Firefox in Webflow because of how each browser handles scaling and rendering for SVGs and canvas elements.
1. Chrome Renders at Lower Pixel Density by Default
- Chrome often scales Lottie animations as raster images, especially when using
canvasrendering mode, which can look blurry on high-resolution displays. - Firefox tends to render SVGs or canvas at higher pixel density, making animations appear sharper.
2. Webflow Lottie Settings Influence Rendering
- Webflow embeds Lottie files using the
lottie-weblibrary, which defaults to canvas rendering when possible. - Canvas-mode rendering in Chrome can appear blurry if the canvas pixel ratio isn’t set manually.
- Firefox may automatically compensate by rendering at device pixel ratio, resulting in a crisper look.
3. Fix: Force SVG Rendering Mode
- When exporting your Lottie file (e.g., from After Effects via Bodymovin), set it to "SVG" renderer instead of "Canvas".
- Webflow currently does not provide a toggle for renderer mode, but you can:
- Re-export the animation using SVG mode in Bodymovin.
- Rehost the animation and embed it manually with forced
renderer: 'svg'via custom code (only if necessary).
4. Check for Scaling or Width/Height Issues
- In Webflow, ensure your Lottie element is not being upscaled via CSS.
- Set explicit width and height in pixels, or use percentage-based scaling carefully to avoid browser-side interpolation.
- Avoid stretching small Lottie animations to larger areas, as this introduces blur in Chrome.
5. Apple Retina Displays Exacerbate the Issue
- Blurriness in Chrome is more noticeable on high-DPI (retina) screens, where scaling without resolution compensation becomes obvious.
Summary
Lottie files can appear blurry in Chrome due to canvas rendering at lower pixel density. To fix this, re-export your Lottie animation using SVG rendering mode in Bodymovin and avoid resizing the asset beyond its designed resolution in Webflow. Firefox typically handles scaling better by default, making the same animation look crisp.