javascript - How do I work around a Safari bug that allows a filter to escape bounds even with overflow hidden? - Stack Overflow

admin管理员组

文章数量:1350023

I'm trying to use a CSS filter to blur an image. In all browsers, the blur filter results in the blur going outside the bounds of the image for whatever value you set the blur to (expected). But I want the edges to be defined (and the image to have a box shadow), so I wrap the image with another div with overflow set to hidden. This works in all browsers.

However, due to some app-specific constraints, I need to update the size of the wrapper with JavaScript on load and resize. This works in all browsers except Safari. Changing the size of the wrapper element randomly triggers a painting bug where the filter begins to escape the bounds of the wrapper. It doesn't always, but it seems to increase in likelihood on MobileSafari and/or based on the size of the DOM.

Here's a fiddle with a small demo. Using Safari, resize the window repeatedly and you'll trigger the bug. Sometimes it will repaint and fix itself, sometimes it will not. (Use Chrome or Firefox and it will work fine.)

(Screenshot of the blur escaping the wrapper.)

It should be noted that unlike this fiddle, in the application I am only setting the new width and height when they change, and Safari still fluctuates between the blur escaping and not escaping even when the width and height are NOT being set during the resize event.

Things I've tried (that haven't worked):

• Delaying the calculation and setting of the wrapper width until the resize event is plete using clearTimeout/setTimeout
• Unsetting and resetting overflow: hidden on both the wrapper and the image with JavaScript after changing the size
• Calling window.getComputedStyle(wrapper) (and on the image, and on the parent element)
• All sorts of shenanigans to promote the wrapper to a posite element (e.g. translateZ(0) transforms), which does stop some of the blur overflow, but not enough. (Screenshot.) Setting a timer to disable the transform simply returns the page to full blur escape.
• Setting white-space: nowrap on the wrapper
• Setting the width and height via document.styleSheets[x].cssRules[x].style.setProperty() rather than object.style.width/height
• Rounding the pixel values to multiples of 2 / 5 / 10 (yes, I'm desperate)

I'm pretty stuck at the moment, and would greatly appreciate any help you can provide. Thank you!

I'm trying to use a CSS filter to blur an image. In all browsers, the blur filter results in the blur going outside the bounds of the image for whatever value you set the blur to (expected). But I want the edges to be defined (and the image to have a box shadow), so I wrap the image with another div with overflow set to hidden. This works in all browsers.

However, due to some app-specific constraints, I need to update the size of the wrapper with JavaScript on load and resize. This works in all browsers except Safari. Changing the size of the wrapper element randomly triggers a painting bug where the filter begins to escape the bounds of the wrapper. It doesn't always, but it seems to increase in likelihood on MobileSafari and/or based on the size of the DOM.

Here's a fiddle with a small demo. Using Safari, resize the window repeatedly and you'll trigger the bug. Sometimes it will repaint and fix itself, sometimes it will not. (Use Chrome or Firefox and it will work fine.)

(Screenshot of the blur escaping the wrapper.)

It should be noted that unlike this fiddle, in the application I am only setting the new width and height when they change, and Safari still fluctuates between the blur escaping and not escaping even when the width and height are NOT being set during the resize event.

Things I've tried (that haven't worked):

• Delaying the calculation and setting of the wrapper width until the resize event is plete using clearTimeout/setTimeout
• Unsetting and resetting overflow: hidden on both the wrapper and the image with JavaScript after changing the size
• Calling window.getComputedStyle(wrapper) (and on the image, and on the parent element)
• All sorts of shenanigans to promote the wrapper to a posite element (e.g. translateZ(0) transforms), which does stop some of the blur overflow, but not enough. (Screenshot.) Setting a timer to disable the transform simply returns the page to full blur escape.
• Setting white-space: nowrap on the wrapper
• Setting the width and height via document.styleSheets[x].cssRules[x].style.setProperty() rather than object.style.width/height
• Rounding the pixel values to multiples of 2 / 5 / 10 (yes, I'm desperate)

I'm pretty stuck at the moment, and would greatly appreciate any help you can provide. Thank you!

• javascript
• html
• css
• safari
• webkit

Share Improve this question Follow edited Mar 6, 2016 at 19:48 Brock Batsell asked Mar 2, 2016 at 19:15 Brock BatsellBrock Batsell 5,81311 gold badge2727 silver badges2727 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

The bug seems to be averted if you add a -webkit-mask-image to the image:

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

https://jsfiddle/pqjh2471/

-webkit-mask-image is not particularly well supported, but it is supported in Safari from 4.0 on.

you can give a fluid width to your wrapper in CSS which will have the same effect as your JS code right now, and that might fix your bug, you can also change your width of img to 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%;
  
}

  <div id="image_wrapper">
    <img id="image" src="https://scratch.brockbatsell./black-wallpaper-13.jpg">
  </div>

Interestingly if I let the edges of the image outside the parent's bound by just 1px, the bug stopped occuring: https://jsfiddle/1edf4k9t/7/

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

Would that be acceptable to you?

A fluid container that keeps its width/height ratio is possible without JavaScript. You can see it here in this Fiddle.

What I've basically done is add a container called #padding_ratio, which has a padding-bottom of 62.5% (100 / 1.6, like your JavaScript did). A padding-bottom can't have a percentage value that is actually relative to the height of it's parent element, because of the fact that webpages were originally not supposed to be 'designed' vertically (hence the reason it is so hard to vertically align elements). So when you do use a percentage, it will be relative to the width of its container.

Anyway... So this container is now a solid box of padding, so if you put an img inside of it, it's gonna be outside it. So I've added position: absolute, as well as top: 0 and left: 0.

Hope this helps

本文标签：