Bug 139810

Summary:	Multiple text-shadows on SVG text element renders incorrectly
Product:	WebKit	Reporter:	Torstein Hønsi <torstein>
Component:	SVG	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Normal	CC:	ahmad.saleem792, itsme, mmaxfield, nishgau28, simon.fraser, webkit-bug-importer, zimmermann
Priority:	P2	Keywords:	BrowserCompat, InRadar
Version:	528+ (Nightly build)
Hardware:	iPhone / iPad
OS:	iOS 8.1
See Also:	https://bugs.webkit.org/show_bug.cgi?id=111216

Description Torstein Hønsi 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.

Comment 1 Torstein Hønsi 2014-12-19 00:06:17 PST

Probably related, but not identical to #111216

Comment 2 Myles C. Maxfield 2014-12-19 13:46:15 PST

<rdar://problem/19106154>

Comment 3 Torstein Hønsi 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.

Comment 5 Tom Kiss 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

Comment 6 Ahmad Saleem 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.

Comment 7 Tom Kiss 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

Comment 8 Simon Fraser (smfr) 2023-08-01 10:41:34 PDT

Is this only an issue when using font-relative units (em) as the offset?

Comment 9 Tom Kiss 2023-08-01 10:51:16 PDT

No, this it happens irrespective of unit type.

I've updated the example with px.