Bug 309047 – Tall `::selection` eats into its background on subsequent lines

• Component: New Bugs
• Status: NEW

[Ana Tudor]

Created attachment 478544 [details]
the selection in Epiphany

Live test: https://codepen.io/thebabydino/pen/qEaOywL - the text has a low line height to make the problem more obvious

Try selecting text from the second line on. The upper part of the selection of every line but the first one seems clipped out, exactly from the level where the selection background of the previous line ends. I could only test this via Epiphany, but it's been confirmed the same happens in actual Safari:

🦣 https://mastodon.social/@anatudor/116161409305652545

🦋 https://bsky.app/profile/anatudor.bsky.social/post/3mg42stntgc2i 

This does not happen in Chrome or Firefox, where the selection is tall on every line (and paints over the letters of the previous line, but at least that's fixable by setting a semi-transparent `::selection` background + an SVG `filter` on the element to recover the previous line letters half seen through the semi-transparent selection and place them on top of it; a selection clipped at the top from the second line on isn't something I can hack my way around).

[Radar WebKit Bug Importer]

<rdar://problem/172160711>