0

I've spent all day trying to create an infinite scrolling banner, using CSS3 animations. These are my requirements:

  1. The banner width must be across the entire page;
  2. No matter how large or small the browser window is, the animation must loop perfectly;
  3. The scrolling speed must be consistent for different browser window sizes;
  4. Resizing or zooming must not break any of the above requirements;
  5. Must work in most browsers (at least Chrome and IE).

This is how far I've come in JSFiddle. It works in IE, but in not Chrome.

When you zoom out in Chrome, you can see the end of the banner. As @bjb568 pointed out, this can be fixed by setting width: 1000%. However, if you refresh the page after zooming out, and zoom back to 100%, you'll see that it does not loop perfectly anymore, and the scrolling speed is a lot slower than before.

For some reason this just doesn't work well with Chrome's zoom function. I tried using em but that did not solve it. Can somebody help me?

Tl;dr: in Chrome, after zooming out, refreshing, and zooming back in, requirement 2 & 3 fail.

Community
  • 1
  • 1
Rudey
  • 4,717
  • 4
  • 42
  • 84
  • Correct me if I'm wrong, but it seems to me that you are trying to fix problems that I would not consider normal user behaviour. What I'm trying to say don't fixate to much on non-standard behaviour as you most likely will not encounter that again except now, whilst developing... Let's say somebody really browses with a viewport of 50%, he most likely wont notice that the animation is "too slow", he will assume it's the speed it should be... I'll have a look nonetheless ;) – MMachinegun Jun 14 '14 at 12:03
  • For me, it was not just the speed that was off using a non-100% viewport, the animation itself wasn't looping right. (see comments below [@bjb568's answer](http://stackoverflow.com/a/24173288/1185136)) But it seems not everyone was getting this behaviour. – Rudey Jun 14 '14 at 22:27

2 Answers2

1

http://jsfiddle.net/sREjt/1/

width: 1000%;

Just make it huge™. Then unless you zoom really fast, there won't be a problem.

This works in Chrome, Safari, and FireFox.

bjb568
  • 11,089
  • 11
  • 50
  • 71
  • That solves the first problem, but when I zoom out to 25%, refresh your JSFiddle, and zoom back in to 100%, the scrolling speed is a lot slower, and it does not loop. (I can see it jumping) – Rudey Jun 11 '14 at 22:02
  • @RuudLenders Strange, I can't reproduce the jumping, tho the speed does change. – bjb568 Jun 11 '14 at 22:07
  • For me, it jumps because it is unable to complete the animation within 5s because the scrolling speed is significantly slower. – Rudey Jun 11 '14 at 22:15
1

So after trying around I haven't found a solution when only using CSS, but I am pretty sure your speed issue in Chrome has to do with you using calc:

calc() width is calculated at the beginning, then it has the width and assigns the speed to complete the animation in the time you set (5s). So depending how long 100% + 600px is when your page is rendered, that speed set then is the speed you get, no matter what you resize afterwards.

A possible solution to fix your problem would be to force the element to repaint every time the zoom changes, this requires a little JS.

http://jsfiddle.net/marczking/sREjt/14/

This should solve your speed issue, as chrome recalculates the width and speed when zooming.

Hope this helps.

Update:

So my assumption that the issue was caused by using calc is not correct as @bjb568 commented. In his answer he only uses percentages and no calc but there is the same issue in his result.

Chrome changes the width of the div in both cases when zooming (without any additional JS). So Chrome handles this the way you would expect.

What Chrome actually does not do is repaint (recalculate) the animation, that one is set on load. To resolve this you need the extra JS to tell Chrome to repaint the div each time the viewport changes.

Community
  • 1
  • 1
MMachinegun
  • 3,044
  • 2
  • 27
  • 44
  • Thanks, now it works nicely. However, I'm curious: what does `el.offsetHeight;` do? To me it looks like a useless statement, however without it, it does not work. – Rudey Jun 14 '14 at 22:29
  • `el.offsetHeight` is from this answer: http://stackoverflow.com/a/3485654/2102463 I didn't come up with that ;) – MMachinegun Jun 15 '14 at 13:40
  • If it's `calc`'s problem, why doesn't my answer work sometimes? – bjb568 Jun 18 '14 at 01:09
  • You are right, it's not a `calc` issue! I changed that in the answer and pointed out more clearly what the actual cause is. animation is set on load and not recalculated when zooming (contrary to the `width` *being* recalculated) – MMachinegun Jun 18 '14 at 09:12