CODEWITHSUNDEEP
cssanimationwebkit
zessx
zessx

Reputation: 68790

Webkit memory limit with -webkit-animation

I'm faced with a memory issue, using -webkit-animation.

Principle

I want to animate a gradient background. As they are not animatable in keyframes, I put each background in a different div, and I'm playing with those div opacity and z-index :

Problem

Only the 16 first animations work, on the 17th we just see a blank div, until the restart of all animations.

I noticed I don't have the problem using -moz-animation and Firefox, the issue only happens on Chrome, using -webkit-.

Depending of your viewport size, you'll be able to see more or less animations.

Code

HTML

<div class="item item-01">ITEM 01</div>
<div class="item item-02">ITEM 02</div>
<div class="item item-03">ITEM 03</div>
...

CSS

.item {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 1;
}
.item-01 { 
  background: red; 
  z-index: 100; 
  -webkit-animation: item01 30s linear infinite;
}
.item-02 { 
  background: blue; 
  z-index: 96; 
  -webkit-animation: item02 30s linear infinite;
}
.item-03 { 
  background: red; 
  z-index: 92; 
  -webkit-animation: item03 30s linear infinite;
}
...
@-webkit-keyframes item01 { 0%, 100% {opacity: 1;}  4%, 99.999% {opacity: 0;} }
@-webkit-keyframes item02 { 4%, 100% {opacity: 1;}  8%, 99.999% {opacity: 0;} }
@-webkit-keyframes item03 { 8%, 100% {opacity: 1;} 12%, 99.999% {opacity: 0;} }
...

For the example purpose, I replaced gradient backgrounds by simple red/blue ones.

Any way to make this code work ?

EDIT
I updated my question, following to my recent found :

Upvotes: 1

Views: 798

Answers (2)

zessx
zessx

Reputation: 68790

This was indeed a webkit bug, that no longer exists for years.

Upvotes: 0

vals
vals

Reputation: 64164

I think that the solution is to have only 2 divs, each with an animation.

The animation of the first div loads a background, transitions to opacity 0, changes the background, transitions to opacity 1, to oapcity 0 , changes the background, and so on.

The animation of the second div does the same, but with the even backgrounds

Upvotes: 1

Related Questions