Bug 205660 – paint-order not working for <text> node when using text-anchor property on parent element

• Component: SVG
• Status: RESOLVED CONFIGURATION CHANGED

[Marijan Lekic]

Paint order for <text> node is not respected if parent element has a property "text-anchor: middle"

Reproducible scenario:

1) open working example https://jsfiddle.net/g3xeqjbv/
2) paint-order is working fine
2) uncomment /* text-anchor: middle; */ and see difference -> paint-order not working for text2

[Radar WebKit Bug Importer]

<rdar://problem/58259080>

[Daniel Darabos]

On Safari 13.1 (13609.1.20.111.8) on macOS 10.13.6 (17G12034) the JSFiddle from Marijan did not reproduce the issue for me. But it does if I do:

svg:hover {
    text-anchor: middle; 
}

I've hit this with hover in a real application. The hover handler does not actually change the text-anchor in my case, but it changes a few other things. (There is a text-anchor too, it just doesn't change.)

I can't pin down the logic of what I see. If I remove "g:hover { cursor: pointer; }", the glitch goes away. But it also goes away if I remove some other hover effects.

[Daniel Darabos]

Created attachment 400033 [details]
The bug in action.

[Ahmad Saleem]

Test without commented CSS code and hover also added - https://jsfiddle.net/4bjyLp0n/

I am unable to reproduce this in Safari 17.4 (from gif reference, I don't see any shift in text).

@Karl - can you try it as well before we can close it, if it is not reproducible.

[Karl Dubost]

Thanks Ahmad.
Confirmed.