css - 硬件加速时在Chrome中裁剪时，CSS渲染不正确

我在Chrome上的filter: blur()遇到问题。我已经使用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;
      }

<html>
  <body>
    <div id="incorrect"></div>
    <div id="correct"></div>
  </body>
</html>

最佳答案

您可以尝试将#incorrect::before的最后一个属性“translation-value-z”设置为1。我不知道为什么会这样，但是它似乎可以工作。

有关更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d

      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, 1);
        -ms-transform: translate3d(0, 0, 1);
        transform: translate3d(0, 0, 1);
      }

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

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

<html>
  <body>
    <div id="incorrect"></div>
    <div id="correct"></div>
  </body>
</html>

关于css - 硬件加速时在Chrome中裁剪时，CSS渲染不正确，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34601457/