Useful Snippets

Useful Snippets


This blog is used to collect useful snippets related to Linux, PHP, MySQL and more. Feel free to post comments with improvements or questions!

August 2020
M T W T F S S
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Categories


Fixing slow performance and crashes on iOS Safari and Chrome

Stanislav KhromovStanislav Khromov

We recently had issues on a newly released site. The site would appear sluggish and slow to scroll, and it would frequently crash on both iPhone and iPad, with either Safari or Chrome (which is just Safari with a different skin).

We finally managed to track this down to two issues:

Don’t use -webkit-backface-visibility: hidden;

Some people say it stops certain CSS transforms (3D) from flickering. But I’d rather the browser flickers than crashes completely. And while you’re at it…

Disable CSS3 transitions in iOS Safari

The CSS3 support in Safari, as of iOS 7.1, is still really bad in terms of memory management. Our solution to disable CSS3 transitions is to have all transitions under a body class, like this:

body.good-browser article
{
/* Do some fancy animations here */
}

And in the body:

<body class="good-browser">
...
</body>

When we detect iOS we simply remove that class (early in the body tag), and the transitions don’t run.

Example code:

<script type="text/javascript">
    if(navigator.userAgent.match(/iPhone|iPad|iPod/i))
        jQuery('body').removeClass('good-browser');
</script>
CSS

Web Developer at Aftonbladet (Schibsted Media Group)
Any opinions on this blog are my own and do not reflect the views of my employer.
LinkedIn
Twitter
WordPress.org Profile
Visit my other blog

Comments 0
There are currently no comments.