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, prr, 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 | ||
Torstein Hønsi
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
Probably related, but not identical to #111216
Myles C. Maxfield
<rdar://problem/19106154>
Torstein Hønsi
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
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
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
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)
Is this only an issue when using font-relative units (em) as the offset?
Tom Kiss
No, this it happens irrespective of unit type.
I've updated the example with px.
Rene
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).