This might be a bit of an edge case, but this website I built has a kind of screensaver with blend mode difference, that gets set to 100% opacity after inactivity:
css:
#bg{
background-image:repeating-linear-gradient(black 10px, gray 16px, white 20px, black 17px);
pointer-events: none;
mix-blend-mode: difference;
width: 100%;
position: fixed;
height: 100vh;
z-index: 10;
opacity: 1;
transition: opacity 1s ease-in-out;
transform: translate3d(0,0,0);
}
script:
function startTimer() {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
(x = 1);
document.getElementById("bg").style.transition = "opacity 1s ease-in-out"
document.getElementById("bg").style.opacity = (x)
}, 4000);
}
This works fine on safari on my macbook (Version 16.1), but on later versions (17 onwards) the blend mode works on load, but after inactivity it reappears as solid despite stating “difference” when inspecting the element.
If i change a letter (still in inspect mode) and change it back to difference it updates and the effect works fine. If i change the css of the screensaver to blend-mode multiply the entire code works as it should.
I know safari has a history of trouble with difference, I tried setting background to white and applying the translate3d fix. Any ideas for workarounds? Would something like this get fixed?