0

I'm trying to use mix-blend-mode: difference on text as in this codepen: 

if('CSS' in window && 'supports' in window.CSS) {
    var support = window.CSS.supports('mix-blend-mode','difference');
  // tests for mix-blend-mode support
    support = support?'mix-blend-mode':'no-mix-blend-mode';
document.documentElement.className += support;
}
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
body { 
  text-align: center; 
  font-family: Montserrat, sans-serif; 
  color: #000;
  margin: 0;
  margin-top: 3rem;
}
.mix-blend-mode body {
  /* only create background gradient if mix-blend-mode is supported; otherwise, default black text will remain ledgible against a plain white background */
  background-image: linear-gradient(90deg,#fff 49.9%,#000 50%);
  color: #fff;
}
h1 {
  font-size: 10vw;
  margin: 0; 
  mix-blend-mode: difference; 
}
<h1>BAD BOY<h1>

And found out that it works at least on Firefox 72 and Safari 13 but not on Chrome 80.
Do you know what's wrong?

Thanks

Masoud Keshavarz
  • 2,166
  • 9
  • 36
  • 48
Victoire
  • 3
  • 1
  • 2
  • Probably related to https://stackoverflow.com/questions/47998676/why-does-the-height-on-html-element-not-have-effect but I'm not sure Chrome's behavior is ok nevertheless. Setting your body's height to 100vh will make it work. – Kaiido Feb 26 '20 at 05:57
  • @Kaiido check the duplicate. Chrome seems to behave different when it comes to background propagation. It's probably a bug but the fix is to disable the propagation by setting something to html different from transparent – Temani Afif Feb 26 '20 at 08:35
  • @TemaniAfif though that doesn't explain if it's a Chrome bug or not, neither from where it comes from. Ran a quick bisect a found this behavior was introduced by https://bugs.chromium.org/p/chromium/issues/detail?id=673597 I'd say that's a *pretty old* bug, but I don't want to walk the specs to know for sure if it's warrant of a report. Well on second though, could be one at least for interop... – Kaiido Feb 26 '20 at 12:10

1 Answers1

2

This should work, but you have to give a background color to the html. You missed that in the fiddle. Adding a background color to the html worked. Check the snippet.

You can also try the same in fiddle by giving background color to the html

html{
  background:#fff;
  margin:0;
  padding:0;
}
body { 
  text-align: center; 
  font-family: Montserrat, sans-serif; 
  margin: 0;
  height:100vh;
  background: linear-gradient(90deg,#fff 50%,#000 50%);
}
h1 {
  font-size: 10vw;
  margin: 0; 
  color:#fff;
  mix-blend-mode: exclusion;
}
<h1>BAD BOY<h1>
Akhil Aravind
  • 5,741
  • 16
  • 35