CODEWITHSUNDEEP
cssiosmobile-safaricss-animations
Bakabaka
Bakabaka

Reputation: 1505

CSS animation crashes Safari on iPad only

My site crashes in Safari on iPad and on iPad only. I am animating a large picture (4800 x 374px, though only 336 kb) in the header with a css3 animation. After some ten seconds, this causes Safari to crash.

You can see the site at http://bakabaka.nl/preview/leuk/

Can I prevent this crash, and if so, how? Can I make the animation run smoother? It's very jagged now...

Upvotes: 5

Views: 3980

Answers (2)

Rob Erskine
Rob Erskine

Reputation: 927

I was experiencing something similar as well. For anyone else that might be banging their head against a wall, this was crashing Safari on both desktop and iOS. It really doesn't like that ::window-inactive selector.

::-webkit-scrollbar-thumb:window-inactive {
     background: #f2f2f2; 
}

Upvotes: 2

insertusernamehere
insertusernamehere

Reputation: 23580

This is a shot in the dark, but maybe worth it.

What I would try is to use a 3D animation on iOS as it uses hardware acceleration:

-webkit-transform: translate3d(X,Y,Z);

See here for more information: '3D Transform Functions'

Also there can occur some problems with very large images on iOS. Maybe it would a better solution to cut them into pieces. Read more about it: "Know iOS Resource Limits"

Upvotes: 4

Related Questions