Blurred text in Iphone 4 browser when loading content dynamically

Question

I am using the Jquery/Jqtouch libraries for an iphone compatible site. I am now stuck with a problem just in iPhone 4 (not in 2g, 3g or 3gs) where the text becomes blurry on one specific scenario. Below is how it happens

1. The site has one common div container.

   <div id="container"></div>
   

2. The container is filled with content dynamically based on the user action. Below is the function that does that.

   function loadPage(url, section, callback) {
      $('#container').empty();
      $('#container').load(url + ' ' + section, loadComplete(section));
   }
   

3. One sample call to the above function

   loadPage("Data.htm", "#Friends", null);
   

4. Basicaly eveything works fine except on one scenario where the amount the data on the container is huge (ie the #container height increases to 1500px+ not predictable). Now if i replace it with smaller data for different tabs on the same container then the text becomes blurry. Attached is the image

http://i.stack.imgur.com/XE9q4.png

Did anyone come across this scenario. Thanks in advance.

Answer 1

Try closing all your running apps besides safari. It sounds crazy but we have the same problem on the ipad and it just seems to be running out of memory at some point. Closing all the apps stops it. Other thing that seems to make a difference is -webkit-overflow-scrolling:touch, if it doesnt have this property then it doesnt seem to have the problem described.

Answer 2

i was able to fix this by applying the same settings to reduce flicker on the element in webkit browsers:

-webkit-perspective: 1000;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;