1951653 - Broken nested span blending

Status: NEW

(Core :: Web Painting, defect)

Description

[Ana Tudor]

Attachment: firefox.png

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:137.0) Gecko/20100101 Firefox/137.0

Steps to reproduce:

Currently, if we wrap some text in a paragraph in a span, give it a background and a big enough padding, then its background visually covers the previous line.

In case we only wrap into spans isolated words, a simple fix if we have black text is:

p { isolation: isolate }
span { mix-blend-mode: darken }

This blends the span's background with the black paragraph text around the span and prevents blending with anything outside the paragraph (like with an image background on the body). Live demo illustrating this.

For longer spans that wrap, this doesn't work anymore. To go around this, we wrap the span in another span, and set the background and the padding just on the outer span.

p { isolation: isolate }

p > span {
  background: hotpink, crimson;
  padding: .5em .125em
}

span { mix-blend-mode: darken }

Actual results:

We still have the overlap problem in Firefox. Live test.

Expected results:

Now not only should the outer span's background get blended with the black paragraph text outside the span, but in this case, the black inner span text should get blended with the background of the outer span, fixing the overlap problem.

This is what happens in both Chrome and Safari.

Comment 1

[Ana Tudor]

Attachment: webkit.png

the expected result

Comment 2

[Daniel Holbert [:dholbert]]

Thanks for the details on the motivation for the setup here!

(In reply to Ana Tudor from comment #0)

Steps to reproduce:

Currently, if we wrap some text in a paragraph in a span, give it a background and a big enough padding, then its background visually covers the previous line.

(I know Ana knows this, but just for clarity for other folks: this part is not a Firefox specific issue; the issue with lines-covering-previous-lines happens for all browser engines, I'm pretty sure. At least: Firefox, Chrome, and WebKit (gnome-web) all have the spans-with-backgrounds covering up the previous line's text in this^ codepen.

For longer spans that wrap, this doesn't work anymore.

...and this part [more overlap possible even with the first set of tweaks] also isn't specific to Firefox.

Actual results:

We still have the overlap problem in Firefox. Live test.

This part does seem to be specific to Firefox. Firefox shows lines overlapping previous lines in this "Live test" demo^, whereas Chromium/WebKit do not.

Reclassifying to Web Painting since I think that's likely closer to where the relevant code lives.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: reduced testcase 1

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:tnikkel, could you have a look please?

For more information, please visit BugBot documentation.

Comment 5

[Michal Čaplygin [:myf]]

Attachment: Inline backgrounds overlaps test for bug 1951653.html

Adding demo showing behaviour of self- and sibling-overlapping inline backgrounds with and without blend-mode, for documenting.

Comment 6

[Michal Čaplygin [:myf]]

Attachment: Inline backgrounds overlaps test for bug 1951653 - Edge 134.png

Comment 7

[Michal Čaplygin [:myf]]

Attachment: Inline backgrounds overlaps test for bug 1951653 - Nightly 138.png

Comment 8

[Michal Čaplygin [:myf]]

Attachment: Inline backgrounds overlaps test for bug 1951653 - AppleWebKit 605.1.15 from Playwright.png

Comment 9

[Michal Čaplygin [:myf]]

Attachment: Inline backgrounds overlaps test for bug 1951653.html

Comment 10

[Michal Čaplygin [:myf]]

Attachment: Inline backgrounds overlaps test for bug 1951653 - Nightly 138.png

Comment 11

[Michal Čaplygin [:myf]]

Attachment: Inline backgrounds overlaps test for bug 1951653 - Chrome 134.png