Live demo at http://jsfiddle.net/highcharts/fq4rxp31/, run http://jsfiddle.net/highcharts/fq4rxp31/show on iOS. In Safari on iOS 8.1.1 (tested on iPhone 6), when a second text-shadow is applied on and SVG text element, a duplication of the text element is rendered below it. It does not happen in desktop Safari or Chrome. It does however happen in PhantomJS.
Probably related, but not identical to #111216
<rdar://problem/19106154>
Just found out it only applies to Retina displays. On my Mac, if I have an external monitor with 1:1 display, I can drag the browser to the Retina display and back to the external monitor and see the artefact appear and disappear.
Just here to say I'm seeing this issue in Safari 13.1 on macOS (Catalina). I noticed it when using a text-shadow array to simulate a stroke effect on text, with text on path which was noticable. The bug is very noticeable with a large text-shadow. Here's another demo, this time alongside a text-shadow on an h1. Move the browser between a retina and standard resolution monitor to see the issue obviously; otherwise on a retina screen, the bug will be visible as a difference the svg and the html. http://jsfiddle.net/tomkiss/fqc8hzsg/17/show
This is reproducible in WebKit ToT (LBSE & non-LBSE both) using test case from Comment 05. Both Firefox Nightly 117 and Chrome Canary 117 works fine and match each other.
Thanks for verifying. I've updated my example to be clearer, along with an explanation of what's going on. I hope this is a bit more helpful. https://jsfiddle.net/tomkiss/fqc8hzsg/show
Is this only an issue when using font-relative units (em) as the offset?
No, this it happens irrespective of unit type. I've updated the example with px.