Images Blinking and Scrolling Stuttering…

A bug was reported recently regarding JavaScript scrolling on iOS devices (including iPad 3, iOS 5.1.1).

On initial page load, when users scrolled down the page images were blinking and the scrolling was very choppy (staggering and stuttering). Once the entire page had been scrolled once, images stopped blinking, but the scrolling was still very choppy.

The first solution, regarding the images blinking, was adding the following CSS to any images that are scrolled:
img { -webkit-transform: translateZ(0); }
Although the containing scroller was moved using translate3D, the images were apparently not being hardware-accelerated; this does that and solved the blinking.

But that didn’t solve the choppy scrolling. The solution to that was removing references to the :hover and :active pseudo-classes in the CSS. Although these pseudo-classes were only changing background & font colors, for some reason they were completely destroying the scrolling action. It now looks as smooth as native scrolling…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s