translateX not working in FF with percentage?

[sevensixfive]

I’ve been trying to learn how to make an SVG image work as an infinitely scrolling background. As I looked for helpful posts on css-tricks.com I noticed one of the Wufoo promos had a pterodactyl with scrolling clouds. It was exactly the functionality I wanted to learn about.

I started experimenting with it in codepen over the weekend and noticed the animated clouds stopped if I used a percentage for translateX with Firefox. Chrome and Safari don’t seem to have a problem with using a percentage. I checked css-tricks.com and sure enough, the clouds aren’t moving there either if I use Firefox. Did something happen with Firefox? I am pretty sure it used to work.

In codepen I can get it to work in Firefox if I use a pixel value for translateX (-897px).

http://codepen.io/sevensevenseven/pen/EaLbvV

I hope this makes sense, and I apologize if this is something that has already been addressed.

Russ

[Paulie_D]

Interesting…I haven’t found anything specifically on point but what does 49% mean?

If it’s 49% of the viewport width (in this case) then 49vw works.

[sevensixfive]

Here is a pen where the background doesn’t animate in FF:

http://codepen.io/sevensevenseven/pen/VYxxPB

It is my understanding (possibly wrong) that the values -49% and -897px both move the group of paths named “.ad-clouds” approximately half of the full width of .ad-clouds, before the animation starts over. This gives seamless movement going to the left because it starts over before it runs out of image. The result isn’t the same if it moves to the right.

[Paulie_D]

But just by changing % to vw then this does work in FF.

http://codepen.io/Paulie-D/pen/OPZZzK

My guess is that the % is not transferring to the SVG in FF because the SVG has no defined width.

I agree..it should work but equally I would have thought that the animation should be defined in the SVG rather than in the CSS.

Perhaps that’s it?

[sevensixfive]

Thanks for taking the time to experiment and find an alternative. I really appreciate it. The background does move with vw instead of %, but the result isn’t smooth. The background skips. Perhaps it’s a matter of finding the middle with a different value if I were to try it that way. Actually, the value of -897px gives me seamless animation in Chrome, Safari, and Firefox.

It is the change in function that prompted me to ask my question. Why has Firefox stopped working with percent? I am positive it was working just last week.

[Author]

Posts