javascript– 如何解决Safari错误,即使隐藏溢出,也允许过滤器逃脱界限？

概述我正在尝试使用CSS过滤器来模糊图像.在所有浏览器中,模糊滤镜会导致模糊超出图像范围,无论您将模糊设置为(预期)的值.但是我想要定义边缘(并且图像有一个盒子阴影),所以我用另一个div设置图像将其设置为隐藏.这适用于所有浏览器.但是,由于某些特定于应用程序的约束,我需要在加载时使用JavaScript更新包装器的大小并调整大小.这适用于除Safari之外的所

我正在尝试使用CSS过滤器来模糊图像.在所有浏览器中,模糊滤镜会导致模糊超出图像范围,无论您将模糊设置为(预期)的值.但是我想要定义边缘(并且图像有一个盒子阴影),所以我用另一个div设置图像将其设置为隐藏.这适用于所有浏览器.

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

Here’s a fiddle带小演示.使用Safari,重复调整窗口大小,您将触发错误.有时它会重新粉碎并自我修复,有时它不会. (使用Chrome或firefox,它会正常工作.)

(Screenshot of the blur escaping the wrapper.)

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

我尝试过的事情(没有奏效)：

>使用clearTimeout / setTimeout延迟包装器宽度的计算和设置,直到resize事件完成
>取消设置和重置溢出：在更改大小后,使用JavaScript在包装器和图像上隐藏
>调用window.getComputedStyle(包装器)(并在图像上和父元素上)
>各种各样的恶作剧将包装器推广到复合元素(例如translateZ(0)变换),这确实会阻止一些模糊溢出,但还不够. (Screenshot.)设置计时器以禁用变换只会将页面返回到完全模糊转义.
>设置白色空间：nowrap在包装器上
>通过document.styleSheets [x] .CSSRules [x] .style.setproperty()而不是object.style.wIDth / height设置宽度和高度
>将像素值舍入为2/5/10的倍数(是的,我很绝望)

我现在很困惑,非常感谢你提供的任何帮助.谢谢！最佳答案你可以在CSS中为你的包装器提供一个流畅的宽度,它与你现在的Js代码具有相同的效果,这可能会修复你的BUG,你也可以将img的宽度改为max-wIDth

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

总结

以上是内存溢出为你收集整理的javascript – 如何解决Safari错误,即使隐藏溢出,也允许过滤器逃脱界限？全部内容，希望文章能够帮你解决javascript – 如何解决Safari错误,即使隐藏溢出,也允许过滤器逃脱界限？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1122854.html