发现了一个疑似浏览器渲染问题的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>