2011-10-24 23 views
3

webkit-overflow-scrolling: touch;のiOSテキストと画像:タッチ

これは、スクロールの面で完璧に動作しますが、それは適用されoverflow: scroll<DIV>に著しくテキストと画像をぼかし。私はiOS5と3つの異なるiPadsでこれを試してみました。

Appleのネイティブイージング/バウンスアルゴリズムは、他のどのJSよりも優れているので、この新しい機能の使用を開始したいと思います。それは私が使用する必要があるフォントでさらに顕著です。ここで

あなたはiOS5を/ワットiPadから試すことができますデモです:

http://sseeger.drivehq.com/test.htm [スターク、NOのWebKit-オーバーフロースクロール:タッチ;]

http://sseeger.drivehq.com/test2.htm [ぼやけ、WebKitのオーバーフロースクロール: touch;]

答えて

2

あなたが見ていた問題は、ipadのデフォルトのズームによるものです。 Paulの反応は正しかったが、不必要にユーザーズーミングも無効になった。画面の最初の縮尺と幅を正しく設定するだけで済みます。私のテストケースについては

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

、iPad上でこれら2本のページを開いてみてください: http://www.jasonbuckboyer.com/playground/ios/overflow_scrolling/blurred.html(かすみ) http://www.jasonbuckboyer.com/playground/ios/overflow_scrolling/not_blurred.html(ぼやけていない)

0

iOSシミュレータでぼやけているようではありません。 webkit-overflow-scrollingが使用されているにもかかわらず、なぜぼやけているのかが分かります。勢いがあるときにコンテンツを違った形でレンダリングする必要があるからです(少なくとも私が思うところです)。

解決策としては、Appleが問題に対処するのを待たなければなりません(たとえそれが幅広い視聴者に影響を与えているとしても)。

0

ページのヘッダーセクションに次のメタタグを追加してみてください。

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

解決できませんでしたが、ありがとうございます。 –

1

-webkit-perspective: 0;

は私のために働きました。