Css animations affect browser interactions

HTML & CSS
1

I have been trying something similar to this - https://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/.
Its a ul, with 6 li’s positioned on top of each other. Each li has a different background image. An infinite css opacity animation is applied to each one, with a different delay, resulting in a fading/zooming in slideshow - a really nice effect. There’s also another infinite animation on the text within the li.

Unlike the example, which has nothing following the 100vh div (no scrolling needed), I have a whole lot of content below. I’m finding as the animations are happening the browser scrolling is affected - it seems to pause for a few seconds until an animation has finished.

Is that normal?

I’ve always thought if you can do something with css, it’s a better option than javascript, but is this pushing it too far?? Is javascript a better way of doing this? Are too many css animations a bad thing?

I’ve only tested in firefox.

2

The demo there does not have anywhere to scroll to, to demonstrate the problem.
Do you have a working page where the problem can be replicated?

3

You can see it here https://www.w3schools.com/code/tryit.asp?filename=FKLCGMH8YDL7

I’ve just tried it in Edge. I don’t get the pausing scrolling, but the image movement is really juddery.

4

I’m seeing the same thing in IE11 for that page, the scaling is not too smooth. It’s fine in Firefox and Chrome. I guess it’s just a problem with how the MS browsers work.
None showed any problem with scrolling, but such problems could be down to specific video hardware or drivers.

5

I’m going back to a javascript slideshow instead - that one looks much smoother.

I was just surprised css animations could cause problems - it was like they were making firefox hang momentarily. It wasn’t just scrolling that was affected, I couldn’t even select a different tab at certain points of the animation.

Thanks for your input.

6

IE has a bug with mousewheel scrolling on fixed elements and nothing to do with the animation as such.

I believe its the fixed positioning that is causing problems as the browser has to do a complete redraw every time you scroll. Some browsers are better than others but all will suffer performance lag. Paul Irish has some tips here.

You can use 3d transforms for a smoother movement.

e.g.


	0% {
	    opacity: 0;
	    transform: translate3d(200px,0,0);
	}
	8% {
	    opacity: 1;
	    transform: translate3d(0px,0px,0px);
	}

Note you are stopping the text animation at 8% so the text is static anyway for the rest of the animation?

Do you have an example of that? I’m sure if its fixed positioned it will exhibit similar problems.

1 Like
7

I never saw any issue with scrolling, it’s the smoothness (or lack of) of the animation in IE. Like there is no rounding or blending between pixels as they translate, so the appearance is that it’s moving as 1px increments, giving the shaky appearance of following a sawtooth path.

Oddly I went to check a site of mine which used a css slide-show in IE to see if it’s the same. But the anim does not play, can’t recall if that’s deliberate or not. :thinking:

1 Like
8

Yes I forgot IE11 (and probably edge) hare buggy when animating background images especially the background-position. I remember removing the animation from a site because of it last year.

1 Like
9

Firefox is actually coping with it quite well now, I can’t get the lag I had previously, but I have recently rebooted and not opened the inspector console yet - I am sure that slowly kills my firefox (I miss firebug!).

Thanks for the link, I thought the problem was caused by the sheer number of animations I was running (12 x infinite), I see now it all depends on what you are animating and how.

The stop at 8% is because there are 6 slides all running the same 36 second animation, each with a different delay. They are all opacity 0 for 30 seconds of it, and have just 6 seconds of display each.

Do you have any advice on achieving that effect (I do like the fixed position!) without breaking firefox & without looking clunky on IE? I was going to use a slick slider instead, and write some animations for the slides, but if I make that position fixed I guess I’ll have the same problems?

How is it that http://www.menucool.com/zoom-slider looks fine in edge? Much smoother than it does in firefox?

10

Yes sometimes plugins and inspectors can be troublesome and cause issues that might not usually occur.

You just have to be careful in what you animate and trigger the 3d rendering where possible as that is much much smoother.

The problem with fixed elements is that as soon as the screen scrolls the whole thing has to be re-drawn. It’s been an issue from day one with one browser or another since position:fixed was implemented.

You can also improve performance by adding backface-visibility: hidden; to the fixed elements as mentioned here.

In the end its a matter of tweaking and checking in various browsers until you find the optimum settings for all. It can be a bit trial and error. Browsers will always differ in how they perform and some do things better than others and is just a fact of a web developers life:)

The demo you created seems to be running quite smoothly for me with the changes mentioned above so I think you are pretty close to getting what you want.:wink:

11

Thanks for the help. I’ve read a lot & think I understand the theory, though some things seem to only apply to certain browsers, and I’m not sure how up to date some of it is.
I’m still struggling a little with my demo - it seems the longer it is running, the more lag I get on my browser, but it is hard to pinpoint as any diagnosis tools seem to affect it too.
I found a performance tool in firefox that gave me this waterfall of what’s happening as the animation is running (not on landing, this is a few transitions in)

794×846 39.9 KB

I understand recalculating style is bad, and i seem to be doing it over and over.
Does this chart look bad to you?
I read someone talking about 60fps as pretty good, mine’s only 51fps. I’m not sure what I should be looking at or aiming for on this chart. Can you shed any light?

12

From your graph your average is only 16.24fps but if I run your code on my Firefox I’m averaging 54fps so it may be you have something extra running in your version or that you have a memory leak or problem in Firefox. It could be one of your plugins or that you have too much going on at the same time.

1509×356 97.2 KB

The css animation seems fine though on its own and there’s not many repaints going on (until you scroll).

If I look in chrome I see a similar graph.

1224×989 138 KB

You can see from around the 20 second mark the green boxes appear and that’s when I started scrolling the display and you get a performance hit with the fixed positioned elements (or maybe just because of scrolling).

I’m not really that clever with the ins and outs of the performance tabs but it seems that keeping repaints to a minimum is best for css animation performance.

13

Finally worked out what it is, bizarrely it’s my screen slowing everything down!
I have 2 monitors, one of them is a Hanns-G touch screen. If I use Firefox with the mouse on there the fps dives down to about 20, I don’t even have to click anything, just moving the mouse over the window affects it. If I only use touch, it is fine.

1 Like
14

I was going to say, that if things are affecting FPS and display glitches, it may well just be down to individual video hardware (or drivers), not necessarily a fault in the css of a site. I have not seen any of the scrolling issues you describe, but my desktop has a decent graphics card, though if I were to try on my old laptop it may be different.

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.