Strange "Shadow Lines" In Webkit - html

Question

An issue I'm having is strange lines appearing in certain situations. So far I only notice the issue in Webkit browsers. Also, I know my HTML is not done in the most efficient way, but for the purposes of my project, I would like it to remain the same, unless it is the cause of the issue. For my current work, it happens when I highlight text, or click certain things. This is a big issue since highlighting will be done a lot on my page. Please see my example below, note the extra blue areas in the first image are caused by highlighting text (not shown).
As you can see, when the page loads the lines are not present, however — after using the page for a bit, lines like this appear.
I did my best to recreate the problem in JS fiddle, and I was actually able to. If you highlight text, and then click off the text, you should see a line appear.
Here is my JSFiddle example.
Here is a a picture of the issue reproduced in 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;
}
If I had to make a guess, I would assume it has something to do with the blur effect?
Any idea how to fix this?

Answer 1

Also reproducible on Mac OS X / Latest Chrome.
This is a bug in Webkit that seems to be caused by combining transform:scale with filter:blur. If I remove the transform in the jsfiddle, the glitch is no longer reproducible: https://jsfiddle.net/2fr6tcgz/
If the only reason you're using scale is to hide the blurry edges of the background, you could use background-size: 105% auto; background-position: center center; as a workaround: https://jsfiddle.net/xa23ja88/ (I also fixed the position: aboslute; typo).
Update:
Apparently the above doesn't fix it completely. But this does: https://jsfiddle.net/o0mupqbo/ (switching the nesting of background image and color). Does that work in your situation?