发现了一个疑似浏览器渲染问题的bug
发布于 4 年前 作者 dislido 2315 次浏览 来自 问答

代码如下,简单来说就是在一个flex元素A里面有CSS动画正在进行时,它的相邻后续元素B内的blur效果会出现白边问题,在chrome87和safari14复现,firefox84没有问题 无动画:image.png 有动画:image.png

<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>
回到顶部