image and text inside scroll gets very blurry on ipad?

[Manmade]

I load all my pages as separate ajax pages and it works as it should,
the pages scroll nice etc.

This works good in the iphone and android but in the ipad the images
and text gets very blurry the second time i load a page.

The first time a load a page it looks sharp, but if I go back to the
index page and then load the page again it gets blurry.

Has anybody any input about this?
I got no idea why this is happening, before I upgraded to iOS5 it work
great! Then I didnt have this problem.
Thanks!

[Kerri Shotts]

This is strange. I'm using two scrollers in an app I'm developing, and it works fine on both an iPhone and iPad (both running iOS 5.0.1). Do you have an example you could post so that we could see if we can duplicate the problem?

Another thought: do you have zooming enabled? (I don't. Maybe that's it?)

[Manmade]

Hi Kerri

I got a demo at http://www.manmade.se/iphone/hotell/ipad.html

 

The strange thing is that it is not happening all the time? So it might not be a problem when you view it at first, but after a wile it will get pixilated-blurry!

I dont know if its a memory issue or rendering or what it is.

 

No zoom enabled.

[Kerri Shotts]

Wow - totally see what you mean by blurry! Odd that it isn't consistent, and that if I go down a level and then back again, the blurriness disappears. This is on my iPad1/iOS5 device. I'll see what I can find out as to the "why"... but that's *very* strange.

BTW, nice design & layout. Should be very slick when finished. :-)

[Marley]

I had this problem too awhile ago - only on iPad version as well. I am struggling to remember what caused it - but am sure it was something simple like a duplicate ID or class or div id, or unclosed tag.

 

Mine would do the same thing - after going 2 levels down it would go blurry and stay that way.

I remember going through lines and lines of code - only to find it was a typo I made and never noticed.

 

Sorry cant remember what it was - but hope this helps! Had a quick look at your demo, but couldnt spot anything obvious.

 

 

[Manmade]

Kerri, thanks.

 

I read somewhere that it might be a problem with -webkit-transform:translate3d(0,0,0); witch I had in my .scroller class, I removed it, but Im not sure the problem went away since it doesnt accur all the time.

Could you please test on your ipad1, I only have ipad 2, thanks!

 

----- Original Message -----

From: Kerri Shotts

To: isc...@googlegroups.com

Sent: Monday, January 16, 2012 7:30 PM

Subject: Re: image and text inside scroll gets very blurry on ipad?

[Manmade]

I forgot - Im not sure why the -webkit-transform:translate3d(0,0,0); is there, if I need it, it seams like I dont, the pages are scrolling as the should I think!?

I just wondering if it is causing other problems that I dont see at first!

----- Original Message -----

From: Kerri Shotts

To: isc...@googlegroups.com

Sent: Monday, January 16, 2012 7:30 PM

Subject: Re: image and text inside scroll gets very blurry on ipad?

[Manmade]

Hi Marley

Ok, thanks, Ill go through the code.

If you remember, please drop me a line, thanks.

Frustrating that it doesnt happen all the time, now its hard to know if I have fixed it or not!

 

----- Original Message -----

From: Marley

To: isc...@googlegroups.com

Sent: Tuesday, January 17, 2012 5:44 AM

Subject: Re: image and text inside scroll gets very blurry on ipad?

[Kerri Shotts]

Okay, a few things after playing with this for a couple days:

1) It's still doing it. Memory doesn't seem to play very much an issue here: when I'm low and when I'm not, pages seem to be blurry.

2) Oddly enough, when I enable Safari's Debug Console (in the Settings app), most of the pages suddenly work. A couple remain blurry, but most are perfect renditions. Obviously, though, one can't expect users to enable this on their devices, but /something/ must be going on here.

3) I've seen two different degrees of blurriness: the "little" blurry and the "pixelated" blurry (almost as if the page has been blurred twice or rendered at a substantially lower resolution). Usually the pages that exhibit each type will stay that way, but sometimes they do switch back and forth.

4) Bug: if I tap on the same list item twice (that is, Rum, then Rum again, the page loads, but then everything stops working. Clicking on other list items fail to load anything.) Maybe this could be part of the issue? (Or could be totally unrelated.)

5) It sucks that there isn't a proper javascript debugger with Mobile Safari. Then one could really delve deep in to the code to figure out when and how and why things are breaking. My only suggestion at this point is to use a lot of console.logs, since they will show up in the debug console.

I'll see what else I can find, but just wanted to let you know where I was at.

[Mauro Rosa]

Hi, I have this problem too. My guess is this related to how web-kit render the page when zoon in and out happens. I remove this line (without a better solution) and the thing go better.. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">  Goog look on you research!

Em terça-feira, 17 de janeiro de 2012 12h08min39s UTC-3, Manmade escreveu:



[Manmade]

Ok, thanks a lot!

Nice to hear that Im not alone :-)

Has it removed the problem totally, or does it still happens sometime?

 

Ill test it!

I think it also has something to do with -webkit-transform:translate3d(0,0,0); , if I add this to the image and text that renders, it gets better, but if it removes the problem totally, Im not sure!?

[brobert7]

Awesome!

I just added -webkit-transform:translate3d(0,0,0); to my body style
and it took care of my blur issues.

Thnx for posting this.

[Manmade]

Good, but I dont think that you should set it on the body, if I remenber
right I think that Matteo sayed that it could lead to memory issues, I could
be wrong.
Im setting it on the div that contains my text and on a class that I have on
my images.
I have also read somewhere that somebody has removed the <meta

name="viewport" content="width=device-width, initial-scale=1.0,

maximum-scale=1.0, user-scalable=no"/> and that the problem whent away,
havent tested my self though.

Hope it helps!

[DeM]

Hi Just had a similar problem, but only when a vimeo video is inside the div. 

The div had an overflow:hidden .

I removed that, and it fixed it.

Check your overflow setting, it could be the key

[red]

We have run into this problem too. It seems to be a memory issue with the ipad. If you close all other apps then it goes away and if you open a bunch of games etc then it come back. seems fairly reproducible.

[THEQ]

Hi guys. In recently noticed this issue too. I was creating a web page
and during the proces I was testing the design on the iPad. I simply
created a single div in which a put long jpg image. The image was
blurry. What helped was to simply cut the image on several pieces and
than put these image in the web page. It doesn't matter if other
applications were running or how the big picture was exported. It
simply didn't like the big picture. It seem logical to be related to
the memory. But maybe in other way. Maybe there is a limitation to a
single file (image) size. Well, at last there is another solution.