.json flickering in Firefox & "X" for closing disappeared in my lightbox

Design help Animations & Interactions
1

Hello Webflow community, this is the first site that I have created in Webflow. I am having two technical issues:

The .json works great in Chrome, Safari, Edge, and also on mobile, but on my iMac and my MacBook Pro, in Firefox (only), the .json flickers, rather than showing the smooth light sweep across the bowl of fruit. If I refresh once or twice, it fixes it. Any idea why this is happening in Firefox?

  • I create a lightbox, using the Webflow Lightbox element and it worked great. At first there was an “X” to close the lightbox, but after a few days it is no longer there. I can still close it by clicking where there is no pointer, but would like the “X” to be visible, for a more clear user experiences. Any thoughts on why the “X” stopped showing?

I appreciate any insights that you can share. I am also open to any other feedback about the site that you would like to provide.

Here is my read-only link:

Here is my staging link:

Thank you and have a great evening!

2

Hi Cathy,

For the flickering Lottie animation in Firefox, try these common fixes:

  • Check if the animation container has a specific width and height set
  • Ensure the animation’s frame rate matches your exported Lottie JSON file
  • Add “transform: translate3d(0,0,0)” to force hardware acceleration
  • Try setting “renderer: ‘svg’” in your Lottie animation settings

Regarding the missing lightbox “X”, this typically occurs when:

  • Custom CSS is accidentally hiding the close button
  • The lightbox component’s close button class has been modified
  • Z-index conflicts are preventing the button from displaying

Try checking your custom CSS for any rules affecting the lightbox close button and ensure there are no overlapping elements with higher z-index values.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like
3

:+1:Thanks so much! I will try these fixes and let you know how it works out. :grinning_face:

4

Hello! I added “transform: translate3d(0,0,0)”, as you suggested and it worked perfectly! Yay! The Lottie JSON now performs correctly in Firefox! Thank you so much!!!

Regarding the lightbox “X”, I’m still stuck. There is no Custom CSS and I didn’t modify the close button. The only element set with a z-index is the navbar (fixed position), which is set to 9999 so that it’s on top of everything else. But the “X” did show up for a while when the lightbox was first created, at which time the navbar z-index was already set to 9999. Not sure where to go from here.

If you have any insights to share, I would appreciate it! :grinning_face: