Борьба с -webkit-фильтром: размытие, а не твердые края (работает с фильтром: размытие)

Question

I have written this pen

EDITsee this pen of Alexander Omara for a shorter version of my pen

в основном мы устанавливаем интервал bg всегда будет больше, чем весь экран, даже по размеру. Размытые края следует удалить, используя известное «использование контейнера вокруг изображения, которое меньше изображения», чтобы обрезать размытые края. Этот контейнер имеет размер фактического порта просмотра экрана.

Сейчас это отлично работает в новейшем светлячок 35.

Но он не так трудно в WebKit браузерах, например, проверено на хромированном 40.0.2214.91 м.

Прежде всего, есть зеленый Б.Г. от тела видимого, после текста оно исчезает?! и показывает беловатое размытие.

Это даже не все, если вы используете горизонтальную прокрутку (я не очень хочу горизонтальной прокрутки на самом деле)

зеленоватый фон из тела исчезает. Если вы снова прокрутите влево, то снова появится. Размытый край идет от края окна браузера, рядом с полосой прокрутки, это не, исходящий от фактического края изображения. Вы можете увидеть его на зеленом фоне, прокручивая влево и вправо, а зеленый превращается в белый.

Magic.

Поднимите вилку на это, и наше сообщество веб-сайтов исправьте это. Или есть исправление к этому, я почему-то упускаю из виду?

Источник:

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(); 
      }); 


}); 

Answer 1

Вы можете попробовать этот трюк.

Применить тот же образ вы размывание в контейнер сНа

Примера здесь:

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); 
}