html - Webkit 中出现奇怪的 "Shadow Lines"

Question

我遇到的一个问题是在某些情况下会出现奇怪的线条。到目前为止，我只注意到 Webkit 浏览器中的问题。另外，我知道我的 HTML 没有以最有效的方式完成，但出于我的元素的目的，我希望它保持不变，除非它是问题的原因。对于我目前的工作，当我突出显示文本或单击某些内容时会发生这种情况。这是一个大问题，因为突出显示将在我的页面上进行很多操作。请看我下面的示例，请注意第一张图片中额外的蓝色区域是由突出显示的文本(未显示)引起的。

如您所见，当页面加载时，这些行不存在，但是 — 在使用页面一段时间后，会出现这样的行。

我尽了最大努力在 JS fiddle 中重现了这个问题，我真的做到了。如果您突出显示文本，然后单击关闭文本，您应该会看到一条线出现。

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/ (切换背景图像和颜色的嵌套)。这对你的情况有用吗？