iOS 9 iPad air text-shadow rendering artefacts

Question

With html as follows:

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

And css:

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

I am getting some odd shadow artefacts in rendering on iOS 9.3.2 on iPad air (1 and 2). The problem was not reproducible on iPad mini 1 or 2 or on on iOS 10.1.

I experimented with changing the font, line height, alpha transparency in shadow etc... and the culprit seems to be simply using any text-shadow with a raw h1 element (and I assume other elements). The problem seems to be easier to reproduce when font size is larger and text colour is white, but is definitely there with only text shadow property (might have to pinch zoom in and out a bit to re-create it).

The problem as captured in the screenshot provided is quite minor, but with different text/font sizes it is sometimes much worse.

Does anyone have any information about the root cause? Does anyone know exactly what devices/os versions this affects? Does anyone know of any good workaround for the issue?

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

Answer 1

Try making the h1 positioned relative or absolute (whichever works for it's placement in the tree). Then add a top:0;

Also try:

Mess with the font-smoothing CSS properties on the H1, specifically subpixel-antialiased. Try those two separately and together. I can't replicate on my Browserstack VM, otherwise, I'd be able to probably figure this out.