Fighting with -webkit-filter: blur and not solid edges (works with filter: blur)

Question

EDIT see this pen of Alexander Omara for a shorter version of my pen

basically we set the bg span to always be more than full screen, even on resize. The blurry edges should be removed by using the known "use a container around the image that is smaller than the image" to cut off the blurry edges. This container has the size of the actual screen view port.

Now this works perfectly fine in the newest firefox 35.

enter image description here

But it fails so hard in webkit browsers e.g. tested in chrome 40.0.2214.91 m.

enter image description here

First of all, there is the green bg from body visible, after the text it disappears ?! and shows a whitish blur.

That's not even all, if you use the horizontal scroll (i don't really want a horizontal scroll actually)

enter image description here

The greenish background from the body disappears . If you scroll left again, it reappears. The blurry edge is coming from the edge of the browser window, next to the scrollbar, it is not coming from the actual image edge. You can see it by the green background, when scrolling left and right, and that the green turns into white.

Magic.

Pull the plug on this and have our webkit community fix it. Or is there a fix to this I somehow am overlooking?

Source:

HTML

<span class="lux-section" ><span class="bg" ></span><span><br><br><br><br><br>About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us About us about us<br></span></span>

CSS

.lux-section .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(http://s15.postimg.org/4elomwgbv/luxvitae.jpg) center center scroll no-repeat;
  background-size: 100% auto;
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  filter: blur(15px);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: -1;
  display: inline-block;
}

body{
  background-color: green;
  margin: 0;
}

JS

      lux = {};

function reinitSizes(){
            lux.viewWidth = $(window).width()   ;
            lux.viewHeight = $(window).height() ;
  //enclosing span of the bg image and the text
            $(".lux-section").css({
                "width": lux.viewWidth,
                "height": lux.viewHeight
            });

  //resize the bg image to be bigger than it's enclosing span.
            $(".lux-section > .bg").each(function(index, bgObj){
                var blur = 15;
                var resized = blur * blur;
                $(bgObj).css({
                "width": (lux.viewWidth +   resized),
                "height": (lux.viewHeight + resized),
                "top" : Math.round(-0.5*resized),
                "left": Math.round(-0.5*resized)
            });
        });

        }

$(function(){

 reinitSizes();

  $(window).resize(function() {
                reinitSizes();
            });


});

Looks like WebKit is trying to do some magic optimizations and clipping the blur to the visible section. [Here's a simpler Codepen the shows off the main issue](http://codepen.io/anon/pen/rawrog). — Alexander O'Mara, Jan 26 '15 at 05:26
As work around... What about removing the background color of your parent element? Example: http://codepen.io/anon/pen/eNOZGg — GibboK, Apr 17 '15 at 13:16
Please have a look at this http://codepen.io/anon/pen/JdPXMM — GibboK, Apr 17 '15 at 13:25

score 0 · Answer 1 · answered Apr 17 '15 at 13:35

You can try this trick.

Apply the same image you are blurring to the div container

Example here:

http://codepen.io/anon/pen/aOoNGV

body {
  background: black;
}
.wrap {
  background: green;
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
    background: white url('https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png');
}
.image {
  position: absolute;
  left: -15px;
  right: -15px;
  top: -15px;
  bottom: -15px;
  background: white url('https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png');
  -webkit-filter: blur(15px);
     -moz-filter: blur(15px);
          filter: blur(15px);
}

Fighting with -webkit-filter: blur and not solid edges (works with filter: blur)

1 Answers1

Linked