Странные «Теневые линии» в Webkit

Question

Проблема, с которой я сталкиваюсь, - это странные строки, появляющиеся в определенных ситуациях. Пока что я вижу только проблему в браузерах Webkit. Кроме того, я знаю, что мой HTML-код не выполняется наиболее эффективным способом, но для целей моего проекта я бы хотел, чтобы он оставался прежним, если только это не является причиной проблемы. Для моей текущей работы это происходит, когда я выделяю текст или нажимаю определенные вещи. Это большая проблема, поскольку подсветка будет много сделана на моей странице. См. Мой пример ниже, обратите внимание, что дополнительные синие области в первом изображении вызваны выделением текста (не показан).

Как вы можете видеть, когда страница загружает строки нет, однако - после того, как с помощью страницы немного, линии, как это появляется.

Я сделал все возможное, чтобы воссоздать проблему в скрипте JS, и я действительно смог. Если вы выделите текст и выделите текст, вы увидите строку.

Here is my JSFiddle example.

Вот картина выпуска воспроизведенной в JSFiddle.

HTML:

<div class="container"> 
    <div class="background-image"> 
     <div class="background-color"></div> 
    </div> 
    <div class="box"> 
     <div>Highlight all text</div> 
     <div>Keep going!</div> 
     <div>Then click off to deselect</div> 
    </div>  
</div> 

CSS:

.container { 
    width: 500px; 
    height: 500px; 
    position: relative; 
} 
.background-image{ 
    background: url('http://i.imgur.com/4pgHkXy.png') repeat; 
    -webkit-filter: blur(4px); 
    filter: blur(4px); 
    -webkit-transform: scale(1.05,1.05); 
    transform: scale(1.05,1.05); 
    top: 0; 
    left: 0; 
    width: 500px; 
    height: 500px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.background-color { 
    background: #00adee; 
    opacity: .5; 
    width: 500px; 
    height: 500px; 
    position: aboslute; 
    top: 0; 
    left: 0; 
    } 

.box { 
    background: #fff; 
    top: 20px; 
    bottom: 20px; 
    width: 200px; 
    height: 300px; 
    position: absolute; 
} 

.box div { 
    margin: 10px; 
    width: 180px; 
    height: 50px; 
    background: #ccc; 
} 

Если бы мне пришлось сделать предположение, я бы предположить, что это что-то делать с размытием эффект?

Любая идея, как исправить это?

Answer 1

Также воспроизводится на Mac OS X/Latest Chrome.

Это ошибка в Webkit, которая, по-видимому, вызвана объединением transform:scale с filter:blur. Если удалить преобразование в jsfiddle, глюк больше не воспроизводим: https://jsfiddle.net/2fr6tcgz/

Если единственная причина, вы используете масштаб, чтобы скрыть размытые края фона, вы можете использовать background-size: 105% auto; background-position: center center; в качестве обходного пути: https://jsfiddle.net/xa23ja88/ (Я также установил опечатку position: aboslute;).

Update:

Видимо выше не исправить полностью. Но это делает: https://jsfiddle.net/o0mupqbo/ (переключение вложенности фонового изображения и цвета). Это работает в вашей ситуации?