Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Parallax no longer works in Firefox 16+

  • 9 replies
  • 2 have this problem
  • 1 view
  • Last reply by scromer

more options

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

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 👍 2

All Replies (9)

more options

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

more options

Thanks for the help Michael! If I change these will it then break it for earlier versions of firefox?

more options

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?

more options

Sure does. Thanks for the help!

more options

Did you remove the -moz from "-moz-transition" as well?

more options

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);

more options

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

more options

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

more options

Thanks for the reply! That fixed it, did you notice that scrolling is now not as smooth as it was?