Streaming live at 10am (PST)

Inexplicable parallax only in Firefox


#1

The website looks correct in Chrome and iOS, but not in Firefox or the Microsoft browsers.
To test it, go to the story page by clicking the "story" link.
I did not want the images inside the link blocks to parallax, but they parallax in the latter browsers.
I'm on Windows.
Additionally, on the same latter browsers, the pink triangle in the top left is now a square. These bugs utterly baffle me.
I tried hosting externally to see if that made a difference, but the effect is the same.

Webflow share link:
https://preview.webflow.com/preview/connorrandhalleck-cff523ef43bde83914f50?preview=1b3672268fe23ff2a1de5f98c6c53e5a

"Publish to selected domain" link:

My third party link:

In Chrome:

In Firefox:

I hope somebody knows the answer to this, or takes it as an interesting challenge! I am at my wit's end :blush: :sob:
Thanks!


#2

Hi @bowsertattoo,

Thanks for posting. It looks like you currently have these background images set to fixed

The fixed setting on bg images will give them the parallax effect—I was able to see the parallax scroll in all both chrome and firefox

Once removed the issue should be resolved.

Regarding the triangles it looks like you are using a trapezoid shaped icon as a bg image to create this shape. Instead, I recommend using a triangle as that will be easier to make compatible across all browsers.

A second alternative is to create these triangles with CSS: https://forum.webflow.com/t/css-triangle-inside-of-webflow/3145

I hope this helps! :slight_smile:


#3

Thank you so much Brando! I’m glad I understand the parallax function now.
The triangle bit was baffling me, but just creating a new shape was a great solution.


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.