Recently I had been working on a website that uses mix-blend-mode: color. I just found out it didn’t work on Safari. Apparently color is not supported . I had to find a way to maintain this mix blend mode for non-Safari browsers, in which it worked fine, but override it in Safari.

Then I found this overly verbose answer on Stackoverflow.com. There are 10+ examples to apply css to only specific Safari versions, but the one I picked was the following:

/* Safari 7.1+ */

_::-webkit-full-page-media, _:future, :root .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

I only had to adjust it to my own situation. Of course I’m using TailwindCSS because Tailwind evangelist Laurens told me to. In this case I’m using soft-light, which does seem to work on Safari.

/* Fix mix-blend-mode color bug on Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .mix-blend-color {
    mix-blend-mode: soft-light !important;
}

• css
• tailwindcss