iOS 9 iPad Luft text-shadow Artefakte

Question

Mit HTML-Darstellung wie folgt:

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

und CSS:

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

ich einige seltsame Schatten Artefakte immer in Rendering auf iOS 9.3.2 auf dem iPad Luft (1 und 2). Das Problem konnte auf dem iPad mini 1 oder 2 oder auf iOS 10.1 nicht reproduziert werden.

Ich experimentierte mit der Änderung der Schriftart, Zeilenhöhe, Alpha Transparenz im Schatten etc ... und der Schuldige scheint einfach mit einem Text-Schatten mit einem rohen h1-Element (und ich nehme andere Elemente). Das Problem scheint einfacher zu reproduzieren, wenn die Schriftgröße größer ist und die Textfarbe weiß ist, aber es ist definitiv nur mit der Eigenschaft Text Shadow vorhanden (muss möglicherweise etwas vergrößert werden, um es neu zu erstellen).

Das Problem, wie in dem Screenshot dargestellt, ist ziemlich gering, aber mit anderen Text/Schriftgrößen ist es manchmal viel schlimmer.

Hat jemand irgendwelche Informationen über die Ursache? Weiß jemand genau, welche Geräte/Betriebssystem-Versionen dies betrifft? Kennt jemand eine gute Problemumgehung für das Problem?

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

Answer 1

Versuchen Sie, die h1 positioniert relativ oder absolut zu machen (je nachdem, was für seine Platzierung im Baum arbeitet). Dann füge ein Top hinzu: 0;

Händler:

Verwirrung mit der Schriftglättung CSS-Eigenschaften auf dem H1, speziell Subpixel-Anti-Aliasing. Probieren Sie diese zwei getrennt und zusammen. Ich kann auf meiner Browserstack-VM nicht replizieren, sonst könnte ich das wahrscheinlich herausfinden.