Question

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

enter image description here

正如您所看到的，当页面加载时，行不存在，但是 - 在使用页面之后，会出现这样的行。

我尽力在JS小提琴中重现问题，而我实际上能够。如果突出显示文本，然后单击文本，则应显示一行。

Here is my JSFiddle example.

以下是JSFiddle中再现的问题图片。

enter image description here

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/（切换背景图像和颜色的嵌套）。这适用于你的情况吗？

奇怪的＆＃34;阴影线＆＃34;在Webkit中

1 个答案: