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

The site has one common div container.
```
<div id="container"></div>
```

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));
}

One sample call to the above function

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

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.stack.imgur.com/XE9q4.png

Did anyone come across this scenario. Thanks in advance.

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 :) — Kyle, Aug 27 '10 at 13:44

score 1 · Answer 1 · answered May 09 '12 at 16:05

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.

score 1 · Answer 2 · edited Aug 17 '12 at 17:42

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;

edited Aug 17 '12 at 17:42

Alfred

21,058
61
167
249

answered Apr 22 '11 at 03:36

cjgammon

11
1

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… – Barney Sep 27 '12 at 12:36

score 0 · Answer 3 · answered May 03 '12 at 16:59

0

body{ text-rendering: optimizeLegibility}

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

answered May 03 '12 at 16:59

Yann Eves

337
1
10

score 0 · Answer 4 · edited Sep 17 '12 at 13:18

0

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

Try to comment

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

edited Sep 17 '12 at 13:18

xan

7,440
8
43
65

answered Sep 17 '12 at 07:08

Hemal Monani

82
8

would this be more of a comment to original question, rather than problem solving answer on question asked? – Tom Sep 21 '12 at 06:29

score 0 · Answer 5 · answered Nov 25 '10 at 22:17

0

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.

answered Nov 25 '10 at 22:17

fbrunel

506
4
9

2

The problem was with some CSS property (transition) being set incorrectly. Removing the CSS property fixed the issue in my case. – Ariejan Nov 29 '10 at 21:59
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...) – Dave Nov 30 '10 at 08:24

score 0 · Answer 6 · answered Nov 29 '10 at 09:24

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.

score 0 · Answer 7 · answered Nov 29 '10 at 22:41

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.

score 0 · Answer 8 · answered Jul 15 '11 at 23:53

0

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.

answered Jul 15 '11 at 23:53

Rudi

2,450
5
26
37

Blurred text in Iphone 4 browser when loading content dynamically

8 Answers8