我正在尝试使用 CSS 滤镜来模糊图像。在所有浏览器中，无论您将模糊设置为（预期）多少，模糊滤镜都会导致模糊超出图像的范围。但我想要定义边缘（并且图像有一个盒子阴影），所以我用另一个 div 包裹图像overflow set to hidden。这适用于所有浏览器。
但是，由于一些特定于应用程序的限制，我需要在加载和调整大小时使用 JavaScript 更新包装器的大小。这适用于除 Safari 之外的所有浏览器。更改包装器元素的大小会随机触发一个绘画错误，其中过滤器开始逃脱包装器的边界。情况并非总是如此，但在 MobileSafari 上和/或基于 DOM 的大小，这种可能性似乎会增加。
这是一个小提琴 https://jsfiddle.net/1edf4k9t/4/有一个小演示。使用 Safari，反复调整窗口大小就会触发该错误。有时它会重新绘制并自行修复，有时则不会。 （使用 Chrome 或 Firefox 就可以正常工作。）
(逃离包装器的模糊的屏幕截图 https://scratch.brockbatsell.com/safari-bug-fiddle.png.)
应该注意的是，与这个小提琴不同，在应用程序中，我仅在更改时设置新的宽度和高度，并且即使在调整大小事件期间未设置宽度和高度，Safari 仍然在模糊转义和不转义之间波动。
我尝试过的事情（没有成功）：
- 延迟包装器宽度的计算和设置，直到调整大小事件完成
clearTimeout/setTimeout
- 取消设置和重置
overflow: hidden更改大小后使用 JavaScript 在包装器和图像上
- Calling
window.getComputedStyle(wrapper)（以及图像上和父元素上）
- 将包装器提升为复合元素的各种恶作剧（例如
translateZ(0)变换），这确实停止了some模糊溢出，但还不够。 (截屏 https://scratch.brockbatsell.com/safari-bug-translate.png.) 设置计时器来禁用变换只会将页面返回到完全模糊转义。
- Setting
white-space: nowrap在包装纸上
- 通过设置宽度和高度
document.styleSheets[x].cssRules[x].style.setProperty()而不是object.style.width/height
- 将像素值四舍五入为 2 / 5 / 10 的倍数（是的，我很绝望）
我现在陷入困境，非常感谢您提供的任何帮助。谢谢你！
如果您添加一个，该错误似乎可以避免-webkit-mask-image https://developer.mozilla.org/en-US/docs/Web/CSS/-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/ https://jsfiddle.net/pqjh2471/
-webkit-mask-image https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-image#Browser_compatibility不是特别好支持，但从 4.0 开始在 Safari 中支持。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
