Inexplicable parallax only in Firefox

[bowsertattoo (Connor Halleck)]

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:

Connor Halleck - Animation Reel

My third party link:
http://connorhalleck.com/story.html

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
Thanks!

[Brando (Brandon Roche)]

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: CSS Triangle inside of Webflow

I hope this helps!

[bowsertattoo (Connor Halleck)]

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.