Chrome/Safari interactions working perfect, but Firefox ignores them :(

Design help Animations & Interactions
1

Hey forum!

Pretty stumped on why this happening, so I thought I would come to the always helpful community!

I have a client site with a “while scrolling into view” interaction. The interaction is great on Chrome and Safari, but nothing happens in Firefox. I have tried rebuilding the section altogether and also manipulating z-index to make sure the browser sees the section as “in-view” when scrolling, but I haven’t had any luck.

Here is the live link you can view in both Chrome/Safari and then Firefox to see the difference.

And here is my read-only link for anyone willing to take a peak at what I have wrong :pray:

When scrolled into view on Chrome/Safari, it animates perfectly like below:

image
image2880×1638 354 KB

But here is how it is looking in Firefox:

image
image2880×1650 289 KB

When I inspect the animation in Firefox, I can see it’s performing the transforms, but nothing different is displaying:

image
image2880×1796 836 KB

If anyone has any advice or knows what’s going on, I would be really grateful for the help. Thank you!

2

hi @myonke I have tried but it looks that WF has problem with perspective-origin in Firefox and successfully ignore this rule no mother you do. I have reset your settings in perspective and wrote custom CSS in embed to force it, I have also tried to inject perspective-origin code to live page open in Firefox but WF still winning and doesn’t want to listen even to custom code. It Is a bit odd behaviour. :frowning: :thinking:

maybe someone else will find where your problem is but It looks to me that you end up with contacting a webflow support about this issue.

Good Luck with that.

EDIT: according to Firefox MDN doc I have make it work.

add this code in embed or whatever or try to set your values on this element in WF

.screen-container{
  perspective: 1440px;
  perspective-origin: 50% -125%;
}

DONE :wink:

I have learn a new thing today so thank you :slight_smile:

1 Like
3

Hey @Stan - thanks so much for taking a look at this, I really really appreciate it :slight_smile:

Unfortunately, I need the perspective and perspective origin applied to the .screen-row and not the .screen-container.

Here is how it looks applied to the .screen-row in Chrome:

image
image2880×1108 322 KB

And if I apply the same perspective to the .screen-container like you mentioned, this is how it looks in Firefox:

image
image2880×1090 300 KB

Not sure if that all made sense haha.

4

@Stan I figured it out!

I saw on Stack Overflow that Firefox requires you to tell the elements to preserve 3d, and Webflow wasn’t adding that anywhere. I just added this to the CSS and it works great!

.screen-container {
transform-style: preserve-3d;
}

And now we are all good. Thank you for helping me figure this out :slight_smile:

5

hi @myonke I’m glad you have find solution

1 Like