iOS Text & Images Blurred when using webkit-overflow-scrolling: touch

Question

webkit-overflow-scrolling: touch;

This works perfectly in terms of scrolling, but it blurs the text and images noticeably in the <DIV> with overflow: scroll applied. I have tried this on 3 different iPads with iOS5.

The easing/bounce algorithm native from Apple are much better than any JS equivalent, so I would like to start using this new feature! It is even more noticeable with the font I am required to use.

Here is a demo you can try from an iPad w/ iOS5:

http://sseeger.drivehq.com/test.htm [Stark, NO webkit-overflow-scrolling: touch;]

http://sseeger.drivehq.com/test2.htm [Blurry, webkit-overflow-scrolling: touch;]

Buck · Accepted Answer · 2012-07-06 18:17:29Z

2

The issue you were seeing is due to the default zooming of the ipad. Paul's response was on the right track but also unnecessarily disables user zooming. You just need to correctly set the initial scale and width of your screen.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

For my test case, try opening these two pages on an ipad: http://www.jasonbuckboyer.com/playground/ios/overflow_scrolling/blurred.html (Blurred) http://www.jasonbuckboyer.com/playground/ios/overflow_scrolling/not_blurred.html (Not Blurred)

answered Jul 6, 2012 at 18:17

Buck

2,0742 gold badges16 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Claudio · Accepted Answer · 2015-12-29 12:42:03Z

1

-webkit-perspective: 0;

worked for me.

answered Dec 29, 2015 at 12:42

Claudio

5,9905 gold badges37 silver badges42 bronze badges

Comments

Charlie · Accepted Answer · 2011-11-08 21:12:15Z

0

It doesn't seem to be blurring in the iOS simulator. I can see why it would be blurry though with webkit-overflow-scrolling being used, as it needs to render the content differently when there is momentum involved (at least that's what I think).

As for a solution, you will have to wait for Apple to address the issue (if it even is affecting a wide audience).

answered Nov 8, 2011 at 21:12

Charlie

11.7k19 gold badges88 silver badges141 bronze badges

Comments

paul stockley · Accepted Answer · 2012-01-03 03:39:48Z

0

Try adding the following meta tag to your header section of your page.

<meta name="viewport" content="width = device-width, initial-scale = 1.0, user-scalable = "no"/>

answered Jan 3, 2012 at 3:39

paul stockley

5013 silver badges4 bronze badges

Collectives™ on Stack Overflow

iOS Text & Images Blurred when using webkit-overflow-scrolling: touch

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related