title: Mix-Blend mode doesn't work on custom cursor
body: <p>I would like to add a <code>mix-blend-mode: difference</code> to the inner cursor, but I can't get it to work. I heard that the <code>position: fixed</code> applied to the cursor may cause the problem here. But I can't remove that property, because the cursor needs to follow when scrolling down. Does anyone know how to fix the problem here? Thank you in advance.</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-js lang-js prettyprint-override"><code>class Demo {
    constructor() {
      this.initCursor();
      this.initHovers();
    }
   
  
    initCursor() {
      const { Back } = window;
      this.outerCursor = document.querySelector(".circle-cursor-outer");
      this.innerCursor = document.querySelector(".circle-cursor-inner");
      this.outerCursorBox = this.outerCursor.getBoundingClientRect();
      this.outerCursorSpeed = 0;
      this.easing = Back.easeOut.config(1.7);
      this.clientX = -100;
      this.clientY = -100;
      this.showCursor = false;
  
      const unveilCursor = () =&gt; {
        TweenMax.set(this.innerCursor, {
          x: this.clientX,
          y: this.clientY
        });
        TweenMax.set(this.outerCursor, {
          x: this.clientX - this.outerCursorBox.width / 2,
          y: this.clientY - this.outerCursorBox.height / 2
        });
        setTimeout(() =&gt; {
          this.outerCursorSpeed = 0.2;
        }, 100);
        this.showCursor = true;
      };
      document.addEventListener("mousemove", unveilCursor);
  
      document.addEventListener("mousemove", e =&gt; {
        this.clientX = e.clientX;
        this.clientY = e.clientY;
      });
  
      const render = () =&gt; {
        TweenMax.set(this.innerCursor, {
          rotation: 90,
          x: this.clientX,
          y: this.clientY
        });
        if (!this.isStuck) {
          TweenMax.to(this.outerCursor, this.outerCursorSpeed, {
            x: this.clientX - this.outerCursorBox.width / 2,
            y: this.clientY - this.outerCursorBox.height / 2
          });
        }
        if (this.showCursor) {
          document.removeEventListener("mousemove", unveilCursor);
        }
        requestAnimationFrame(render);
      };
      requestAnimationFrame(render);
    }
  
    initHovers() {
      const handleMouseEnter = e =&gt; {
        this.isStuck = true;
        const target = e.currentTarget;
        const box = target.getBoundingClientRect();
        this.outerCursorOriginals = {
          width: this.outerCursorBox.width,
          height: this.outerCursorBox.height
        };
        TweenMax.to(this.innerCursor, 0.2, {
          x: box.left,
          y: box.top,
          width: box.width,
          height: box.height,
          opacity: 0.4,
        });
      };
  
      const handleMouseLeave = () =&gt; {
        this.isStuck = false;
        TweenMax.to(this.innerCursor, 0.2, {
          width: this.outerCursorOriginals.width,
          height: this.outerCursorOriginals.height,
          opacity: 0.2,
        });
      };
  
      const mainNavHoverTween = TweenMax.to(this.innerCursor, 0.3, {
        ease: this.easing,
        paused: true,
        opacity: 1,
        width: 70,
        height: 70,
        left: -35,
        top: -35
      });
  
      const mainNavMouseEnter = () =&gt; {
        this.outerCursorSpeed = 0;
        TweenMax.set(this.innerCursor, { opacity: 1 });
        mainNavHoverTween.play();
      };
  
      const mainNavMouseLeave = () =&gt; {
        this.outerCursorSpeed = 0.2;
        TweenMax.set(this.innerCursor, { opacity: 1 });
        mainNavHoverTween.reverse();
      };
  
      const mainNavLinks = document.querySelectorAll("a");
      mainNavLinks.forEach(item =&gt; {
        item.addEventListener("mouseenter", mainNavMouseEnter);
        item.addEventListener("mouseleave", mainNavMouseLeave);
      });
  
    
  
  
  
  
  
  
  
    }
  }
  
  const demo = new Demo();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    height: 500vh;
  }
  
  a{
    color: black;
  }
  
  .circle-cursor {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    border-radius: 100%;
  }
  .circle-cursor-outer-badge {
    opacity: 0.5;
    transition: all 500ms ease-out;
  }
  .circle-cursor-inner {
    width: 22.5px;
    height: 22.5px;
    left: -11.25px;
    top: -11.25px;
    z-index: 11000;
    mix-blend-mode: difference;
    background-color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
    &lt;a href="#"&gt;I am a link&lt;/a&gt;
    &lt;div class="circle-cursor circle-cursor-outer"&gt;
      &lt;img class="circle-cursor-outer-badge" draggable="false" width="120" src="https://svgshare.com/i/H2V.svg"&gt;
    &lt;/div&gt;
    &lt;div class="circle-cursor circle-cursor-inner"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>