Android Chrome複数行テキストシャドーレンダリングとぼかし

Question

フォントサイズの大きなテキストシャドーレンダリングや、ぼやけの場合、Android's（6.0.1）Chromeブラウザ（54.0.2840.68）で奇妙なバグが発生しました。私はそれを再現できませんでしたが、MacOS Chromeでも表示されることが報告されました。

私は、さらなる調査のために小さなペンに問題を凝縮： http://codepen.io/quarkus/pen/BQaBGj

をこれは、私がレンダリングしようとしている短期でスタイルの見出しです。 （：前またはぼやけたように影を作成することによって）

h1 { 
    font-family: sans-serif; 
    text-transform: uppercase; 
    font-size: 60px; 
    margin: 0; 
    color: white; 
    line-height: 1.2; 
} 

h1.shadow { 
    text-shadow: 0 0 0 transparent, 0px 0px 40px rgba(0, 0, 0, 1); 
} 

クラスは.filter、.fix3dと.fixだけ3Dコンテキストに見出しをレンダリングすることによって、この問題を解決しようとしています。

これは、それはほとんどのAndroidデバイスをどのように見えるかです：

s.codepen.io/quarkus/debug/BQaBGj on the device

は、誰もがこれまでのレンダリングのようなものを経験し、その溶液に私を指すことができていますか？

おかげ マルクス

EDIT：一つのことを忘れてしまいました。ページ自体がユーザ自身によって、またはペンの中にあるように <meta name="viewport" content="width=device-width, initial-scale=1"> のようにページが「拡大縮小」されている場合にのみ発生します。

Answer 1

私はBrowserstackデバイス（GalaxyとNexusの携帯電話）でこれを取得していますが、デバイスでは見たことがありませんが、チェックするデバイスはたくさんありません。

.text { 
    transform: translateZ(0); 
    display: inline-block; 
} 

ない優れた修正を私はdisplay: inlineに私のテキストを必要とするが、それが動作するよう：私は変換し、テキストをブロックされたためにそれを固定するものが

。