title: mix-blend-mode: hue not working in safari - How can i solve this?
body: <p>I am trying to use the <code>mix-blend-mode: hue</code> in safari on macOS, but i doesn't work. Why? My code looks like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hue-demo {
    height: 100vh;
    width: 100vw;
    background-image: url('https://images.unsplash.com/photo-1600639853470-112d492226da?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=933&amp;q=80');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  .hue-demo::before {
    content: '';
    mix-blend-mode: hue;
    height: 100%;
    max-height: 100%;
    width: 100%;
    background: linear-gradient(45deg, #23a6d5 38%, #FFEB3B 69%);
    position: absolute;
    left: 0;
    bottom; 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hue-demo" /&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How can i solve this? I have now problems in chrome and firefox</p>
  <p>Note: This Demo works in Safari inside the stackoverflow page. I don't know why this works, instead of my web project</p>