139810 2014-12-19 00:05:44 -0800 Multiple text-shadows on SVG text element renders incorrectly 2025-01-09 12:08:19 -0800 1 1 1 Unclassified WebKit SVG 528+ (Nightly build) iPhone / iPad iOS 8.1 NEW https://bugs.webkit.org/show_bug.cgi?id=111216 BrowserCompat, InRadar P2 Normal --- 1 torstein webkit-unassigned ahmad.saleem792 itsme mmaxfield nishgau28 prr simon.fraser webkit-bug-importer zimmermann oldest_to_newest 1057008 0 torstein 2014-12-19 00:05:44 -0800 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. 1057009 1 torstein 2014-12-19 00:06:17 -0800 Probably related, but not identical to #111216 1057166 2 mmaxfield 2014-12-19 13:46:15 -0800 <rdar://problem/19106154> 1073268 3 torstein 2015-03-02 00:36:08 -0800 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. 1682112 5 itsme 2020-08-22 02:25:00 -0700 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 1968953 6 ahmad.saleem792 2023-07-31 16:37:35 -0700 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. 1969006 7 itsme 2023-08-01 03:32:46 -0700 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 1969076 8 simon.fraser 2023-08-01 10:41:34 -0700 Is this only an issue when using font-relative units (em) as the offset? 1969083 9 itsme 2023-08-01 10:51:16 -0700 No, this it happens irrespective of unit type. I've updated the example with px. 2086164 10 prr 2025-01-09 12:08:19 -0800 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).