Parallax no longer works in Firefox 16+
I created a Parallax ( scrolling interactive images in layers which tells a story) about 10 months ago or so, it works in every browser and at that time it worked in firefox 10-ish. I just saw today that it no longer works in Firefox 17 or 16, it doesn't scroll at all. The Parallax is in an iframe container ( not sure if that matters ) and it looks like the iframe has been squashed in height.
Thanks,
Sam
Chosen solution
I was looking at the same issue and was getting an error that aj.toLowerCase() was invalid. So, when i did an alert on aj in Firefox 17, i got true.
I changed:
if (aj != false && aj != "O") {
to
if (aj != false && aj != true && aj != "O") {
and it's working again.
Read this answer in context 👍 2All Replies (9)
Hi, It looks like we unprefixed transforms in Firefox 16 - http://paulrouget.com/e/transformsunprefixed/
Maybe try using the unprefixed version in your css?
Thanks, Michael
Thanks for the help Michael! If I change these will it then break it for earlier versions of firefox?
Yes it will break. Don't swap one for the other; use everything for now to cover your bases
- -moz-transform
- webkit-transform
- transform
So older Firefox will see -moz-transform, Chrome and Safari will see webkit-transform and new Firefox will see transform. When webkit changes then Chrome and Safari will see transform instead of webkit-transform. Then one day in the future you'll be able to remove the prefixed versions and just use transform.
Make sense?
Sure does. Thanks for the help!
Did you remove the -moz from "-moz-transition" as well?
Reason I ask is I have this on all my div's:
-moz-transition-property: -moz-transform; -moz-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
so to fix this one would I add another declaration like so?
-moz-transition-property: transform; -moz-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
Ok I tried fixing it like so:
-moz-transition-property: -moz-transform; -moz-transition-property: transform;-moz-transition-timing-function: cubic-bezier(0, 0, 0.2, 1); -moz-transition-duration: 1000ms; -moz-transform: translate(0px, 0px);transform: translate(0px, 0px);
But it still isn't working, is there anything else that has changed? The div layers aren't in the correct place either , they are all jumbled up
Chosen Solution
I was looking at the same issue and was getting an error that aj.toLowerCase() was invalid. So, when i did an alert on aj in Firefox 17, i got true.
I changed:
if (aj != false && aj != "O") {
to
if (aj != false && aj != true && aj != "O") {
and it's working again.
Modified by sayvil
Thanks for the reply! That fixed it, did you notice that scrolling is now not as smooth as it was?