How can I get around a Safari error that allows a filter to avoid restrictions even when it overflows?

Question

I am trying to use a CSS filter to blur the image. In all browsers, the blur filter results in a blur that goes beyond the image beyond any value that you set the blur (expected). But I want the edges to be defined (and the image has a window shadow), so I wrap the image with another div with overflow set to hidden . This works in all browsers.

However, due to some restrictions for the application, I need to update the size of the wrapper using JavaScript when loading and resizing. This works in all browsers except Safari. Changing the size of the wrapper element randomly causes a drawing error, where the filter begins to go beyond the bounds of the wrapper. This is not always the case, but it seems to increase the likelihood of using MobileSafari and / or depending on the size of the DOM.

Here is a violin with a small demonstration. Using Safari, resize the window several times and you will get an error. Sometimes he will redraw and correct himself, sometimes it will not. (Use Chrome or Firefox, and it will work fine.)

( Screenshot blurring the shielding .)

It should be noted that unlike this script, in the application I set only the new width and height when they change, and Safari still fluctuates between blurring and does not slip away, even when the width and height are NOT set during the resize event.

Things I tried (which didn't work):

• Delay in calculating and setting the width of the wrapper until the resize event completes with clearTimeout / setTimeout
• Reset and reset overflow: hidden on the wrapper and image using JavaScript after resizing
• Call window.getComputedStyle(wrapper) (both on the image and on the parent)
• All kinds of frauds to move the wrapper to the composite element (for example, translateZ(0) transforms), which stops some blur overflow, but not enough. ( Screenshot .) Setting a timer to turn off conversion simply returns the page to complete blur.
• Setting white-space: nowrap on the wrapper
• Setting width and height using document.styleSheets[x].cssRules[x].style.setProperty() , not object.style.width / height
• rounding pixel values ​​to multiples of 2/5/10 (yes, I'm desperate)

I am pretty stuck right now and would really appreciate any help you can provide. Thanks!

Answer 1

you can give fluid width your CSS wrapper, which will have the same effect as your JS code right now, and that can fix your mistake, you can also change width 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.com/black-wallpaper-13.jpg"> </div> 

Answer 2

The error seems to be averted if you add -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.net/pqjh2471/

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

Answer 3

Interestingly, if I allowed the edges of the image outside the parent to be connected only 1px, the error would stop happening: https://jsfiddle.net/1edf4k9t/7/

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

Would this be acceptable to you?

Answer 4

A fluid container that maintains a width to height ratio is possible without using JavaScript. You can see it here in this script .

What I basically did was add a container named #padding_ratio that has padding-bottom 62.5% (100 / 1.6, as your JavaScript did). The bottom of the pad cannot have a percentage that actually matches the height of its parent, due to the fact that the web pages did not initially have to be “designed” vertically (hence the reason why it is so difficult to vertically align elements). Therefore, when you use a percentage, it will refer to the width of its container.

In any case ... So, this container is now a solid box of gaskets, so if you put img inside it, it will be outside of it. So I added position: absolute , as well as top: 0 and left: 0 .

Hope this helps