When I combine mix-blend-mode with the transform property, the mix-blend-mode functionality ceases to work. Is there a workaround for this issue? Although similar questions have been asked before like Does CSS mix-blend-mode work with transform?, they did not provide a solution.
You can find the Codepen example below (Please note that GSAP may not work in the snippet):
https://codepen.io/bimalpandeycode/pen/vYWZvao?editors=1111
let hasHovered = false;
const mouseEnterGSAP = () => {
console.log("ENTER");
hasHovered = true;
gsap.to(".cursor", {
width: 100,
height: 100,
});
}
const mouseLeveGSAP = () => {
hasHovered = false;
gsap.to(".cursor", {
width: 0,
height: 0,
});
}
const cursor = document.getElementById("cursor");
document.addEventListener("mousemove", (e) => {
cursor.setAttribute("style", `left:${e.pageX}px; top:${e.pageY}px; width:${hasHovered?"100px":"0px"} height:${hasHovered?"100px":"0px"}`);
});body {
background: black;
}
.cursor {
background-color: white;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
mix-blend-mode: difference;
z-index: 2;
}
.skills__text__container__Main__langs {
color: cyan;
}
.first {
transform: skewX(20deg);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js"></script>
...
</script>