Bug 278788 – text-shadow is affected by text stroke

• Component: Layout and Rendering
• Status: NEW

[EPRC]

Created attachment 472325 [details]
Rendering issue on webkit’s annoucement of the feature support (left: Firefox, right: Safari)

Hi,

I noticed two rendering issues with -webkit-text-stroke: one on webkit’s annoucement of the feature support (https://webkit.org/blog/85/introducing-text-stroke/, see the text-shadow mixed with text-stroke) and the other in a current project of ours where I noticed the stroke had some sort of "bias" towards the right of the letters.

See attachments for a comparison between Firefox (left) and Safari (right)

I’m on a Mac Mini M2 Pro with MacOS 13.6 and Safari 17.6

[EPRC]

Created attachment 472326 [details]
Stroke bias on the left. Two different fonts (left: Firefox, right: Safari)

I forgot to mention in my initial post that this “bias” is occuring when using the css property paint-order with the value “stroke fill”

[Karl Dubost]

Created attachment 472435 [details]
testcase

For references, these are defined in 
https://compat.spec.whatwg.org/#text-fill-and-stroking

A simplified test case.

[Karl Dubost]

Created attachment 472436 [details]
rendering in safari, firefox, chrome

The difference I see in between the three browsers is that Safari has a stronger shadow than others. Probably it would be better to define a unique font too for this test.

[Karl Dubost]

I have the feeling this is more a rendering issue than a text issue. 
I have tested on 
Safari Technology Preview  202           20620.1.4.8
Firefox Nightly            131.0a1       13124.8.29
Google Chrome Canary       130.0.6696.0  6696.0

[Radar WebKit Bug Importer]

<rdar://problem/135268743>

[Simon Fraser (smfr)]

I think the question here is what should get shadowed.

Should we just be rendering the shadow based on the stroked forms, or on the filled forms, or on both stroked and filled forms?

[Simon Fraser (smfr)]

Created attachment 472448 [details]
Illustrative test case

[EPRC]

(In reply to Karl Dubost from comment #4)
> I have the feeling this is more a rendering issue than a text issue. 

There are indeed two bugs in one, should I file another bug regarding the paint-order stroke “bias”? (see attachment 472326 [details])

(In reply to Simon Fraser (smfr) from comment #6)
> I think the question here is what should get shadowed.
> 
> Should we just be rendering the shadow based on the stroked forms, or on the
> filled forms, or on both stroked and filled forms?

Chrome/Firefox seem to both render the shadow based on the filled forms regardless. Personally I would assume it should be based on the stroked forms if -webkit-text-fill-color is transparent and then both stroked and filled forms when it’s not