- This topic is empty.
February 23, 2015 at 6:55 pm #196650
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).
I hope this makes sense, and I apologize if this is something that has already been addressed.
RussFebruary 24, 2015 at 3:38 am #196666Paulie_DMember
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
49vwworks.February 24, 2015 at 6:22 am #196691
Here is a pen where the background doesn’t animate in FF:
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.February 24, 2015 at 6:34 am #196693Paulie_DMember
But just by changing
vwthen this does work in FF.
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?February 24, 2015 at 6:46 am #196695
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.
- The forum ‘CSS’ is closed to new topics and replies.