硬件加速时在Chrome中剪切时,CSS模糊渲染不正确

我filter: blur()在Chrome上遇到了问题.我曾经transform: translate3d(0, 0, 0)鼓励硬件加速,它大大提高了性能(我谨慎使用它).我有一个元素,我已将其设置before为具有背景图像和模糊.我已将其范围设置为超出其包含元素的范围.

以上是Chrome中发生的事情的屏幕截图.硬件加速版本在左侧,而非硬件加速版本在右侧.请注意,在左侧,模糊显示为带有柔化边缘.

看起来在Chrome中,当硬件加速时,元素会在模糊之前被溢出剪切,从而导致羽状边缘.

除了禁用硬件加速,这可以通过这种大半径模糊来消除性能,还有一种方法可以鼓励Chrome在裁剪之前执行模糊操作吗？

我在下面附上了一个示例测试用例.

谢谢!

      div {
        width: 200px;
        height: 200px;
        position: absolute;
        box-sizing: border-box;

        overflow: hidden;
        border: 2px solid red;
      }

      div::before {
        background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg/1024px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg);
        content: "";
        display: block;
        position: absolute;
        left: -200px;
        top: -200px;
        width: calc(100% + 400px);
        height: calc(100% + 400px);
        background-size: calc(100% + 400px) calc(100% + 400px);

        filter: blur(60px);
        -webkit-filter: blur(60px);
        z-index: 1;
      }

      #incorrect::before {
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }

      #incorrect {
        left: 100px;
        top: 100px;
      }

      #correct {
        right: 100px;
        top: 100px;
      }