Question

我正在尝试使用CSS过滤器来模糊图像。在所有浏览器中，模糊滤镜会导致模糊超出图像范围，无论您将模糊设置为（预期）的值。但是我希望定义边缘（并且图像具有框阴影），因此我将图像与另一个div overflow设置为hidden的div包装起来。这适用于所有浏览器。

但是，由于某些特定于应用程序的约束，我需要在加载时使用JavaScript更新包装器的大小并调整大小。这适用于除Safari之外的所有浏览器。随机更改包装元素的大小会触发绘制错误，其中过滤器开始越过包装器的边界。它并不总是如此，但它似乎增加了MobileSafari的可能性和/或基于DOM的大小。

带有小型演示的

Here's a fiddle。使用Safari，重复调整窗口大小，您将触发错误。有时它会重新粉碎并自我修复，有时它不会。（使用Chrome或Firefox，它可以正常工作。）

（Screenshot of the blur escaping the wrapper。）

应该注意的是，与这个小提琴不同，在应用程序中我只是在它们改变时设置新的宽度和高度，并且即使在宽度和高度没有被设置期间，Safari仍然在模糊逃逸和不逃逸之间波动。调整大小事件。

我尝试过的事情（没有奏效）：

延迟计算和设置包装器宽度，直到使用clearTimeout / setTimeout
更改尺寸后，使用JavaScript在包装器和图像上取消设置并重置overflow: hidden
调用window.getComputedStyle(wrapper)（以及图片和父元素）
各种恶作剧将包装器推广到复合元素（例如translateZ(0)转换），这会阻止模糊溢出的某些，但还不够。（Screenshot。）设置计时器以禁用转换只会将页面返回到完全模糊转义。
在包装器上设置white-space: nowrap
通过document.styleSheets[x].cssRules[x].style.setProperty()而非object.style.width / height
将像素值舍入为2/5/10的倍数（是的，我很绝望）

我现在非常困难，非常感谢您提供的任何帮助。谢谢！

Answer 1

你可以在CSS中为你的包装器提供一个流畅的width，它与你现在的JS代码具有相同的效果，这可能会修复你的错误，你也可以改变width的{ {1}}至img

max-width

#image_wrapper {
  overflow: hidden;
  margin: 30px auto;
  box-shadow: rgba(0, 0, 0, 0.5) 0 5px 14px;
  width:95% /* whatever fits you better here */
}
#image {
  -webkit-filter: blur(50px);
  filter: blur(50px);
  max-width: 100%;
  
}

Answer 2

如果您向图片添加-webkit-mask-image，似乎可以避免该错误：

#image {
  -webkit-filter: blur(50px);
  filter: blur(50px);
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, #fff, #fff);
}

https://jsfiddle.net/pqjh2471/

-webkit-mask-image不是特别受支持，但在4.0以上版本的Safari中受支持。

Answer 3

有趣的是，如果我让图像的边缘仅限于1px，则错误就会停止：https://jsfiddle.net/1edf4k9t/7/

#image {
  margin: -1px 0 0 -1px;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  width: calc(100% + 2px);
}

你能接受吗？

Answer 4

可以在没有JavaScript的情况下保持宽度/高度比的流体容器。您可以在this Fiddle中看到它。

我基本上做的是添加一个名为#padding_ratio的容器，其填充底部 62.5％（100 / 1.6，就像你的JavaScript一样）。填充底部不能具有实际上相对于其父元素的高度的百分比值，因为网页最初不应被设计为＆＃39;垂直（因此它很难垂直对齐元素）。因此，当您使用百分比时，它将相对于其容器的宽度。

无论如何...所以这个容器现在是一个坚固的填充盒，所以如果你把一个img放在里面，它就会在它之外。所以我添加了position: absolute，以及top: 0和left: 0。

希望这有帮助

如何处理Safari错误，即使隐藏溢出，也允许过滤器转义边界？

4 个答案: