iOS文字&使用webkit溢出滚动时图像模糊:触摸

时间:2011-10-24 20:20:25

标签: html ios css ios5 mobile-safari

webkit-overflow-scrolling: touch;

这在滚动方面效果很好,但在应用了<DIV>的{​​{1}}中显着模糊了文字和图像。我在iOS5的3个不同的iPad上试过这个。

Apple原生的缓动/反弹算法比任何JS等效算法要好得多,所以我想开始使用这个新功能!使用我需要使用的字体更加引人注目。

以下是一个可以在iOS 5上试用的演示:

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

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

4 个答案:

答案 0 :(得分:2)

您看到的问题是由于ipad的默认缩放。保罗的反应是在正确的轨道上,但也不必要地禁用用户缩放。您只需要正确设置屏幕的初始比例和宽度。

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

对于我的测试用例,请尝试在ipad上打开这两个页面: http://www.jasonbuckboyer.com/playground/ios/overflow_scrolling/blurred.html(模糊) http://www.jasonbuckboyer.com/playground/ios/overflow_scrolling/not_blurred.html(未模糊)

答案 1 :(得分:1)

-webkit-perspective: 0;

为我工作。

答案 2 :(得分:0)

在iOS模拟器中似乎没有模糊。我可以看到为什么在使用webkit-overflow-scrolling时它会变得模糊,因为当涉及动量时它需要以不同的方式呈现内容(至少这是我的想法)。

至于解决方案,您将不得不等待Apple解决问题(如果它甚至影响到广泛的受众)。

答案 3 :(得分:0)

尝试将以下元标记添加到页面的标题部分。

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