0

I've been looking into mix-blend-mode in CSS which seems like a powerful property! However, I'm very confused as to how this actually works. I'm having unpredictable results. Take this codepen as an example:

https://codepen.io/KingKabir/pen/ONyPeg

The background of the body is set to a dark color, while every other section has a background set to white.

body { background-color: #000 }
section:nth-of-type(even) { background-color: #FFF}

Now try to change the background color of the body to white, and notice how the menu doesn't change it's color to black. What is going on here? Both sections have the same background-color?

If you set the background color of the first section specifically to white, it works as intended. But not if the first section has no background-color and the body is set to white. Shouldn't the results be the same?

I'm having this exact issue on a project I'm working on and I can't figure out what is going on. Edit: I'm using Google Chrome 83.0.4103.106

Edit: Here is an image of what I mean enter image description here

Kenny Bones
  • 5,017
  • 36
  • 111
  • 174
  • Hmm mix-blend-mode does affect the objects contents, not background. So if you make body green, the menu-*text* gets red, if you make it black, the menu-*text* gets white and so on. If I scroll to a another section I can even get the menu splitted into one half of the text in black letters and one half in white.. everything looks how I would expect, so maybe you have to describe more precisely what you expect and maybe add images what you see. – Paflow Jul 03 '20 at 13:47
  • Sure, I updated the post with an image of what I mean :) Basically, both the body and the second section have the same background color of white. But the mix-mode doesn't seem to apply correctly. The entire menu should have black text and menu icon. – Kenny Bones Jul 03 '20 at 14:07
  • This... feels like a bug in Chrome, if you set the `sections` background to white it correctly calculates the difference and shows black text. I've had a look around and as far as I can tell, it looks like they have fixed it in most cases, but the issue remains when the page is iframed (like in codepen) [Bug thread here](https://bugs.chromium.org/p/chromium/issues/detail?id=711955) It also mentions adding a background-color to the `html` is a possible workaround. – DBS Jul 03 '20 at 14:37
  • Aha! In my project, there's an iframe as well. I will look at the workaround! Thank you! This was driving me crazy! :D – Kenny Bones Jul 03 '20 at 14:49

0 Answers0