2007255 - Semitransparent text rendered wrong when letters overlap

Status: NEW

(Core :: Layout: Text and Fonts, defect)

Description

[[e-mail]]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:146.0) Gecko/20100101 Firefox/146.0

Steps to reproduce:

Semitransparent text, see codepen https://codepen.io/gunnarbittersmann/pen/EayYaGj, letters overlap*

1. semitransparent text color, on overlapping areas the text colors add, hence lighter or darker than other parts of the glyphs – not the way to do it
2. opaque text color, semitransparent element (opacity between 0 and 1)
3. same as 2., but with additional span element set to isolation: isolate**

*) b/o negative letter-spacing, but the same happens with fonts like Apple’s Luminari, cf. https://codepen.io/gunnarbittersmann/pen/MYYvOOY
**) other possible hacks include display: block; scale: 1 or position: relative; z-index: 0

Actual results:

Figure 2 looks the same as figure 1: on overlapping areas, the text colors add

That’s not the case on Safari and Chromium browsers: 2 looks like 3, as expected.

Expected results:

Figure 2 should look like figure 3. The hack with the additional span element should not be necessary.

Comment 1

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Text and Fonts' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Jonathan Kew [:jfkthame]]

Interestingly, the issue in Figure 2 of the example disappears if the text is selected; then it renders the same as Figure 3.

Also interesting to note that the issue doesn't occur if the <p> element is given a background other than transparent -- even if it's a background that doesn't actually paint anything, such as background: url().

Comment 3

[[e-mail]]

(In reply to Jonathan Kew [:jfkthame] from comment #2)

Also interesting to note that the issue doesn't occur if the <p> element is given a background other than transparent -- even if it's a background that doesn't actually paint anything, such as background: url().

Indeed. That makes the additional span element unnecessary.

Added to the codepen as figure 4.