All geek questions in one place

CSS animation disables Safari on iPad only

My site crashes in Safari on the iPad and only on the iPad. I am animating a large image (4800 x 374 pixels, although only 336 kb) in the header with css3 animation. After a few seconds, this will crash Safari.

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

Can this failure be prevented, and if so, how? Can I make the animation smoother? Now it is very jagged ...

+6
source share
2 answers

It's a shot in the dark, but maybe worth it.

I would try using 3D animation on iOS as it uses hardware acceleration:

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

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

There may also be some problems with very large images on iOS. Maybe this is the best solution to cut them into pieces. Learn more about this: "Know iOS resource limits. "

+4
source

I also had something similar. For anyone who could hit their head against a wall, this is a Safari crash on both the desktop and iOS. This really doesn't like the ::window-inactive selector.

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

Source: https://habr.com/ru/post/922290/

More articles:


All Articles