CSS3 Animating full page container with several children causes lag

Question

Whenever I try to animate my container (described below), I'm often experiencing some lag (like choppy movement) of the container. I've made some re-search and tried some stuff, but haven't found a solution. The only thing I did found out tho, was that if I remove all images but one, everything works smooth.

So by eliminating all the images, and just having one there, solves the issue. But I need all the images.. the functionality is a slideshow actually (regular fade transition of images).

Please take a look at my setup, and notice me if I'm doing any bad things here (currently only for WebKit):

<div id="container">
    <div id="inner">
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        [...]
    </div>
</div>

With the CSS:

#container {
    width:100%;
    height:100%
    position:absolute; 
    -webkit-transform: translate3d(0,0,0); 
    -webkit-transition: -webkit-transform 800ms linear;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d; /* *should* improve performance? */
}
#inner {
    position:relative;
    width:100%;
    height:100%;
}
.image {
    position:absolute;
    left:0;
    top:0;
    background-image:[something];
    width:100%; 
    height:100%; 
    background-size:cover;
}

Then I just do a couple of these in my code to make the container move around

$('#container').css('-webkit-transform', 'translate3d(0,500px,0)');

Thanks in advance!

EDIT: Here's a fiddle btw (remember that the result-window is very small here, which gives me nice smoothness. But in full-screen, its a bit choppy)

EDIT2: Fixed the broken fiddle!

in the css in #container you lost the semicolon after height property that why @Zeaklous doesn't see any result — Mateusz, Sep 23 '13 at 19:47

score 0 · Answer 1 · answered Sep 23 '13 at 20:02

0

In this case, you have a lag probably because you are moving the container with all of the images (and these images are big). The browser need to calculate new positions for every DOM element that are change the position and move it (that mean redraw all of these big images) in all steps of animation.

If you move only one DOM element with image the animation should be smooth:

$('.image').css('-webkit-transform', 'translate3d(0,500px,0)');

here you have a fsfidde that move only one DOM element.

answered Sep 23 '13 at 20:02

Mateusz

1,222
11
22

That is very true. However, I need to move this whole container, because the page is a big scrollable page, and that container is just the "top part". When user scrolls down, this part scrolls up and away, and next part scrolls in. Therefore I need to move the whole container Im afraid. – Eric Sep 23 '13 at 20:45
Maybe just keep only two images, one that is just visible and second that will be visible next. After change these images replace the first image on the next one and so on – Mateusz Sep 23 '13 at 21:04
Yepp, I'm already implementing that algorithm. But it is still choppy on the scroll for some reason, I don't really know why. Gonna dig deeper into my code and see if there are other elements making the lag – Eric Sep 23 '13 at 21:23

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

Animation lags are often in such cases, because of overload. Maybe you should do some images preload.

Just like it is shown here

And full manual here

edited May 23 '17 at 12:20

Community

1
1

answered Sep 23 '13 at 20:26

Yaro

570
3
20

True, but can you please elaborate how a pre-load would ease the animation of the images? The images are already cached for me in the browser. I don't see the connection between preloading and animating the continer? Please explain :-) – Eric Sep 23 '13 at 20:46

CSS3 Animating full page container with several children causes lag

2 Answers2