blurred text?

[Matteo Spinelli]

if you experience blurred text while using the iscroll, try to put the content div into the HW compositing layer, ie: add translate3d(0,0,0) to your content element.

M.

[preis-finder.info]

Hi Matteo,

what did you mean with HW compositing layer.

Greets from Germany

Kevin

[aja...@gmail.com]

I'm seeing blurry images in addition to text.

translate3d(0,0,0) worked well for the flickering but I haven't had any luck with it for the blurring. 

-webkit-transform: perspective(1000) seems to soften the blurring but its not great.

The problem is most prominent on the iPhone4.

Ajay

[Jordan Dobson]

So if your structure is something like:

<div id="scroller">
<div id="content">Lorem Ipsum...</div>
</div>

In your CSS you would want to include:

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

--
Jordan Dobson • Designer / Developer • 425-444-8014 • About.Me/
JordanDobson

[Matteo Spinelli]

you need to double the images resolution on retina display.

Matteo

[aja...@gmail.com]

The images are double the size and look great at first. I have it setup to scrollToElement on clicking a button. After this fires, several elements which previously looked fine become pixelated. 

When I add webkit-transform: perspective(1000) to the pixelated elements they become blurry instead of pixelated after the scrollToElement event.

It's really peculiar. 

[preis-finder.info]

in my case translate3d(0,0,0)  works

 

Thanks a lot

[neosyn...@gmail.com]

Hi Matteo,

The problem persists, i'm also using font-face to style text.

Testing on windows chrome, opera, ie, firefox - OK.

Ipad, windows safari - it's blurred.

Any ideias?

Thanks,

Artur

[olivermuc]

Same problem here. I tried all of the above but the text is still blurred!

Any ideas or suggestions left?

Having to go with software based scrolling would so defeat the purpose...:(

Thanks!

Oliver

[Michał Mrozowski]

Encountered the same error. Applying translate 3d to all children of the scroll seemed to do the trick

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

Hope it helps! 

Best,

Mike

[Kerri Shotts]

Just be careful here -- the more elements that the browser has to track like this, the more memory you are going to consume as the browser will render a 2d texture for the gpu. This is why it can oft-times improve performance (such as scrolling/animation), but at the price of memory. If you're tight on memory and you have a lot of complicated sub-elements, you may be asking for some trouble. Just something to think about.

[Bernbacher]

Hi,

I got a fixed Header (absolute positioned) and Buttons for Navigation. In my content I use iScroll. If I start scroll all the images get blurred in the navigation. If I stop scrolling, the images stay blurred/unsharp. If I scroll top the images are fine again.

The image are double size (for retina).

-webkit-transform: translate3d(0,0,0);  does not work, because its used for the content and not for the non-scrolling Header-Navigation.

Anyone an idea?

[Grppn]

Rounding appropriate x and y values did the trick for me. 

In the iscroll.js file in the  _pos-function (line 286) I added after line 290:

x = m.round(x); 

y = m.round(y);

Don't know if there are any repercussions...

Op zondag 29 mei 2011 12:12:09 UTC+2 schreef Matteo Spinelli het volgende: