0

I noticed some weird mix-blend-mode behaviour, see here:

body {
  background: blue;
}
main {
  width: 2rem;
  height: 10rem;
  background: blue;
}
div {
  position: absolute;
  width: 5rem;
  height: 5rem;
  mix-blend-mode: screen;
}
div:nth-child(1) {
  background: red;
}
div:nth-child(2) {
  top: 2rem;
  background: green;
}
<main>
<div></div>
<div></div>
</main>

Now the divs don't blend with the body, only with each other and with main. But when I set the height of main to 100vh, suddenly the divs blend with the body. Is this a bug in Chrome? Here is how it looks in my browser with the code above:

And here with height: 100vh (note that the width is unchanged):

Even when the main has no background at all its height changes the mix-blend-mode between the div and the body!

Anyway, I'd like to have divs in some container so they only blend with each other, not with the container background. Is this possibly, across browsers?

fweth
  • 631
  • 6
  • 16
  • set a background color to the html element to avoid background propagation and you should have the same result across browser – Temani Afif Jun 07 '23 at 11:36
  • Thanks a lot. But having the elements blend in each other but not with the background is *only* possible with background on body, not on a parent element? (Because that's the effect I want...) – fweth Jun 07 '23 at 11:37
  • you are probably looking for isolation: https://stackoverflow.com/a/49807419/8620333 – Temani Afif Jun 07 '23 at 11:41
  • Awesome! I played around and it seems I need another element in between, is this correct? So `
    ` and then i put `isolate` on `section`? Because `isolate` on the `div`s didn't lead to the result...     – fweth Jun 07 '23 at 11:45
  • you can use it on the main element – Temani Afif Jun 07 '23 at 11:47
  • But then it blends with `main`, I'd like them to blend with each other, but neither with `main` nor with `body`... – fweth Jun 07 '23 at 11:54

1 Answers1

0

This is the difference that occurs depending on whether or not "background: blue" is applied to the wrapper(ex. body) of the main.

Artxe2
  • 1
  • 1
  • Did you try setting the height of `main`? Did you also get different blending results for `100vh` vs something like `50vh` or `5rem` or is this only in my browser? – fweth Jun 07 '23 at 13:13
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 07 '23 at 20:44