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

https://i.sstatic.net/XE9q4.png

Did anyone come across this scenario. Thanks in advance.

Durand

The text is not the only thing that's blurry, everything is, look real close. That would say to me that it's either a software or device problem linked to the iPhone 4, not your site :) – Cercaria

Answer 1

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;

Checked

backface-visibility toggles have worked for me in similar situations — beware, though: often a 'fix' in iOS & Chrome would activate the undesirable rendering in OSX Safari 6… – Brigettebrigg

Answer 2

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.

Miele

Answer 3

Graphics elements must be "aligned" with the pixels on the screen; coordinates must always expressed as integral values and not floating values. If not, the subpixel rendering engine of the GPU would make it blurry, which is not a problem with animation but definitely one with static images.

In the native SDK, we have to make sure everything is aligned (such as using CGRectMakeIntegral()).

Since you're using a web framework, it's more difficult to tell how to exactly how fix the problem, but I would try to adjust the sizes of your to a precise size and not let the framework figure it out.

Infestation

The problem was with some CSS property (transition) being set incorrectly. Removing the CSS property fixed the issue in my case. – Refinement

Sounds promising for the poster - matches the fact that it's only displayed on the iPhone 4 (2g/3g(s) all have the same resolution...) – Prehuman

Answer 4

What content do you load? Images? Text? There's an internal limit on image sizes for the iPhone (about 4 Megapixels or so). It looks like the phone is trying to reduce the memory load of your website and reduces the resolution to non-retina values.

I can't say more without you posting code.

Landau

Answer 5

This is a shot in the dark, but have you aset your sizes using pt values for your block elements, and em for your text?

The iphone4 resizes your content to fit its higher-res Retina display (compared to the older iphone), and with that scaling i have sometimes noticed blur when using pixel values for block height, width, font size, etc.

Very hard to diagnose without seeing the actual code, but could be the issue.

Mccain

Answer 6

In my case it was CSS

-webkit-transform: translateZ(0);

applied to one of the elements in body. So as Ariejan said, it's removing transition property that fixes it.

Unhurried

Answer 7

body{ text-rendering: optimizeLegibility}

could solve this issue, worth a shot if you haven't included it already

Arapaima

Answer 8

Sometimes, Text blurry may be cause of the iScroll Plugin. Did you use this?

Try to comment

trnOpen = 'translate' + (has3d ? '3d(' : '('),
trnClose = has3d ? ',0)' : ')',

Zoilazoilla

would this be more of a comment to original question, rather than problem solving answer on question asked? – Hortative