Размытие как эффект замороженного стекла уходит из под элемента
Вроде бы, код простой, как 2 копейки, и даже работает на 99% как надо. Но в моём браузере блюр "едет" как на скриншоте.
Может быть, корявый браузер. У всех блюр на всю площадь блока, а у меня поехавший.
Весь день перебираю баги Chrome/Chromium. Аналогичного моему не нашел до сих пор.
document.body.addEventListener('mousemove', e => {
const [centerX, centerY] = [ document.body.clientWidth / 2,
document.body.clientHeight / 2 ];
const [angleX, angleY] = [ 15 * (e.clientX - centerX) / centerX,
30 * (e.clientY - centerY) / centerY];
document.querySelector('.glass').style.transform =
`rotate3d(-1,0,0,${angleY}deg) rotate3d(0,1,0,${angleX}deg)`;
}, false);* { box-sizing: border-box; }
body { margin: 0;
width: 100vw;
height: 100vh;
background: url("https://unsplash.com/photos/IDb-PwCZ58o/download?force=true&w=2400") no-repeat;
background-position: center center;
background-clip: content-box;
perspective: 50vh;
perspective-origin: center center; }
.glass { position: absolute;
width: 60vw;
height: 80vh;
left: 20vw;
top: 10vh;
background: #fff4;
transform-style: preserve-3d;
-webkit-backdrop-filter: blur(10px);
-moz-backdrop-filter: blur(10px);
backdrop-filter: blur(10px); }
span { position: absolute;
z-index: 5;
color: white;
font-size: 10vmin;
letter-spacing: 0.75em;
top: 50%;
transform: translate(-50%, -50%);
left: 50%; }<div class="glass"><span>GLASS</span></div>Сравните:
