Javascript 我如何解决Safari bug，它允许过滤器在溢出隐藏的情况下逃逸边界？

我正在尝试使用CSS过滤器来模糊图像。在所有浏览器中，无论您将模糊设置为（预期）什么值，模糊过滤器都会导致模糊超出图像边界。但是我希望定义边缘（并且图像具有方框阴影），因此我使用另一个div将图像包装为

overflow

设置为

hidden

。这适用于所有浏览器

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

一个小的演示。使用Safari，反复调整窗口大小，就会触发错误。有时它会重新油漆并自行修复，有时则不会。（使用Chrome或Firefox就可以了。）

（）

应该注意的是，与此小提琴不同，在应用程序中，我仅在更改新的宽度和高度时设置它们，而Safari仍然在模糊转义和不转义之间波动，即使在调整大小事件期间未设置宽度和高度

我尝试过的事情（没有成功）：

• 使用

  clearTimeout

  /

  setTimeout

• 取消设置和重置

  溢出：更改大小后，使用JavaScript在包装器和图像上隐藏
  

• 调用

  window.getComputedStyle（包装器）

  （在图像和父元素上）
• 各种各样的把戏将包装器升级为复合元素（例如

  translateZ（0）

  transforms），这确实阻止了一些模糊溢出，但还不够。（.）设置计时器以禁用转换只会将页面返回到完全模糊转义
• 在包装器上设置

  空白：nowrap

• 通过

  document.styleSheets[x].cssRules[x].style.setProperty（）设置宽度和高度，而不是
  object.style.width
  /
  height

• 将像素值四舍五入到2/5/10的倍数（是的，我很绝望）

---

我现在陷入困境，非常感谢你能提供的任何帮助。谢谢大家!

你可以在CSS中为你的包装提供一个流畅的

宽度

，这将与你现在的JS代码具有相同的效果，这可能会修复你的错误，你也可以将你的

img的
宽度
更改为
最大宽度


#图像包装器{
溢出：隐藏；
保证金：30像素自动；
盒影：rgba（0,0,0,0.5）0 5px 14px；
宽度：95%/*任何适合您的宽度*/
}
#形象{
-webkit过滤器：模糊（50px）；
过滤器：模糊（50px）；
最大宽度：100%；
}
有趣的是，如果我让图像的边缘在父对象的边界之外只保留1px，那么错误就不会发生了：

您可以接受吗？
不使用JavaScript，可以使用流体容器保持其宽高比。你可以在这里看到它

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

无论如何。。。所以这个容器现在是一个实心的填充物盒，所以如果你在里面放一个img，它就会在外面。因此，我添加了
位置：绝对
，以及
顶部：0
和
左侧：0

希望这对您有所帮助
如果您在图像中添加一个：

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


虽然没有得到很好的支持，但Safari从4.0开始就支持它

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