[iOS] CSS3 animation is stopped when I scroll my safari on iPad.

I wrote CSS3 animation code like this, and apply it to certain element.

@-webkit-keyframes flapping {
   0% {
   	-webkit-transform:scale(0,0);
   	opacity:1;
   }
   100% {
   	-webkit-transform:scale(1,1);
   	opacity:0;
   }
}

But CSS3 animation is stopped when I scroll my safari on iPad.
Accurately saying, it stops on 0% position of keyframes, and doesn’t progress further more.

I googled. Then I got a result which may resolve this problem.

>> GPUアクセラレーターが使える環境で強制的に有効にできるCSSの指定方法

It says that mobile safari is flickered when safari changes CPU render to GPU one.
If safari initially uses GPU rendering, it doesn’t flicker.
To do this, write this css property to target element.

-webkit-transform-style: preserve-3d;

Then I fixed the problem by this way.
Thanks.

I think that safari may change render method when it scrolls.

Tags: ,

Comments are closed.