2016-10-28 3 views
12

次のように:iOSの9のiPad空気テキストシャドウレンダリングのアーティファクト

<h1>Lorem ipsum Incididunt minim enim pariatur ex in irure Duis deserunt.</h1> 

とCSS:

h1 { 
    color: #fff; 
    font-size: 4em; 
    font-family: sans-serif; 
    text-shadow: 2px 2px 8px #000; 
} 

を、私はiPadでのiOS 9.3.2にレンダリングする際にいくつかの奇妙な影のアーティファクトを取得しています空気(1と2)。この問題は、iPad mini 1または2またはiOS 10.1で再現できませんでした。

フォント、行の高さ、影のアルファ透明度などを実験しましたが、生のh1要素を持つテキストシャドーを使用しているようです(他の要素も想定しています)。この問題は、フォントサイズが大きく、テキストの色が白であるときに再現するのが容易であるように見えますが、テキストシャドウのプロパティ(それを再作成するためにズームイン/ズームアウトする必要があるかもしれません)

提供されているスクリーンショットでキャプチャされた問題は、ごくわずかですが、テキスト/フォントサイズが異なると、時には非常に悪化することがあります。

根本的な原因についての情報はありますか?誰でも、これが影響するデバイス/ OSのバージョンを正確に知っていますか?誰もが問題の良い回避策を知っていますか?

jsfiddle:https://jsfiddle.net/t7ccn528/

ipad render artifacts

+0

私のデバイスで正常に動作します。 –

+0

@ ZeevKatzどのモデル/ iosバージョンで試しましたか? –

+0

iPad 2 iOS 9.5.2とiPhone 5sと6 with iOS 10.0.2 –

答えて

2

が(それはツリー内の配置だために働く方)、相対または絶対位置H1を作ってみましょう。次に、top:0を追加します。

は、関連検索:H1上のフォントスムージングのCSSプロパティを持つ

混乱、特にサブピクセルアンチエイリアス。それら2つを別々に一緒に試してみてください。私は私のBrowserstack VMに複製することはできません、そうでなければ、私はおそらくこれを把握することができるだろう。

+0

提案していただきありがとうございますが、残念ながら問題を解決しませんでした。他のアイデアはありますか? –

関連する問題