Content flickers on iPhone when images load #168

elias6 · 2012-01-07T00:18:46Z

I have a div that I am using iScroll 4.1.9 on. When I add some images to the div, everything inside it flickers on the iPhone. I found that if I add width and height attributes to the images, the flickering doesn't happen, but that is not always a practical option. I haven't figured out what exactly within iScroll is triggering the bug. I am using an iPhone 4 with iOS 4.2.1. This is the code that I am using:

<!DOCTYPE html>
<html><head>
<title>iScroll flicker bug</title>
<!-- The following meta tag is not necessary to trigger the bug. -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
</head>
<body>
<button type="button" id="test">Test</button>
<div id="scroller" style="width: 100%; height: 300px">
  <div id="innerDiv"></div>
</div>
<script src="http://cubiq.org/dropbox/iscroll4/src/iscroll.js"></script>  <!-- iScroll 4.1.9 -->
<script>
  window.addEventListener(
    "load",
    function() {
      new iScroll("scroller");
    }
  );

  var html = "<p>This text will flicker after the images load.</p>";
  for (var i = 1; i <= 10; i++) {
    html += "<img src='http://dummyimage.com/320x480/000/fff&amp;text=" + Math.floor(Math.random() * (1e9 + 1)) + "'>";
  }
  document.getElementById("test").addEventListener(
    "click",
    function() {
      document.getElementById("innerDiv").innerHTML = html;
    }
  );
</script>
</body></html>

The random numbers in the image URLs are to disable the phone's caching and slow down the loading so the behavior is more noticeable. You can also access it at http://jsfiddle.net/X7xdf/1/.

aliasone · 2012-01-07T20:20:23Z

You need to initialize hardware acceleration on those elements beforehand. In your css do,

edited:

#scroller p, #scroller img{
  -webkit-transform: translate3d(0,0,0);
}

elias6 · 2012-01-09T19:09:26Z

I think you meant "#scroller" instead of ".scroller". I tried your idea with this correction and it worked. Thank you.

Is this a bug that can be fixed within iScroll, or is this something the developer using it just needs to remember to work around?

aliasone · 2012-01-09T19:30:51Z

Sorry about that, yes #scroller. It's not a bug in iScroll it's a browser bug. iScroll could probably do this hack automatically to solve it, but I don't know how widespread the problem is.

damianmr · 2012-01-24T18:29:31Z

iScroll does not do that automatically because it might kill Mobile Safari depending on the contents.

ghost · 2013-11-25T14:40:21Z

Thanks guys.

#scroller * {
-webkit-transform: translate3d(0,0,0);
}

solved the problem. You saved me a lot of time.

davidpfahler closed this as completed Nov 26, 2013

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Content flickers on iPhone when images load #168

Content flickers on iPhone when images load #168

elias6 commented Jan 7, 2012

aliasone commented Jan 7, 2012

elias6 commented Jan 9, 2012

aliasone commented Jan 9, 2012

damianmr commented Jan 24, 2012

ghost commented Nov 25, 2013

Content flickers on iPhone when images load #168

Content flickers on iPhone when images load #168

Comments

elias6 commented Jan 7, 2012

aliasone commented Jan 7, 2012

elias6 commented Jan 9, 2012

aliasone commented Jan 9, 2012

damianmr commented Jan 24, 2012

ghost commented Nov 25, 2013