NEW 139810
Multiple text-shadows on SVG text element renders incorrectly 
https://bugs.webkit.org/show_bug.cgi?id=139810
Summary Multiple text-shadows on SVG text element renders incorrectly
Torstein Hønsi
Reported 2014-12-19 00:05:44 PST
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.
Attachments
Add attachment proposed patch, testcase, etc.
Torstein Hønsi
Comment 1 2014-12-19 00:06:17 PST
Probably related, but not identical to #111216
Myles C. Maxfield
Comment 2 2014-12-19 13:46:15 PST
<rdar://problem/19106154>
Torstein Hønsi
Comment 3 2015-03-02 00:36:08 PST
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.
Tom Kiss
Comment 5 2020-08-22 02:25:00 PDT
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
Ahmad Saleem
Comment 6 2023-07-31 16:37:35 PDT
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.
Tom Kiss
Comment 7 2023-08-01 03:32:46 PDT
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
Simon Fraser (smfr)
Comment 8 2023-08-01 10:41:34 PDT
Is this only an issue when using font-relative units (em) as the offset?
Tom Kiss
Comment 9 2023-08-01 10:51:16 PDT
No, this it happens irrespective of unit type. I've updated the example with px.
Rene
Comment 10 2025-01-09 12:08:19 PST
Wanted to add that the behavior seems to depend on font size. In my specific case I can experience more problems with smaller font sizes (larger fonts sometimes work).
Note You need to log in before you can comment on or make changes to this bug.