发现了一个疑似浏览器渲染问题的bug
代码如下,简单来说就是在一个flex元素A里面有CSS动画正在进行时,它的相邻后续元素B内的blur效果会出现白边问题,在chrome87和safari14复现,firefox84没有问题 无动画: 有动画:
<html>
<head>
<title>test</title>
<style>
.rotate {
transform: rotate(180deg);
}
</style>
</head>
<body>
<div style="display: flex">
<div id="el" style="transition: all 1s" class="rotate"></div>
</div>
<div
style="
height: 200px;
width: 200px;
overflow: hidden;
"
>
<div
style="
background-color: red;
height: 300px;
width: 300px;
top: -50px;
left: -50px;
position: relative;
filter: blur(13px);
"
>
</div>
</div>
<button onclick="javascript:document.getElementById('el').classList.toggle('rotate')">toggle</button>
</body>
</html>