在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 /最新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;错字）。

更新：

显然上面没有完全解决它。但是这样做：https://jsfiddle.net/o0mupqbo/（切换背景图像和颜色的嵌套）。这是否适合你的情况？