Recently, I encountered an intriguing and frustrating bug in WebKit browsers.
Consider a scenario where there is a parent DIV (let's say .wrapper) and a child DIV (.main). You apply a box-shadow on the .main DIV and a blur filter on the .wrapper DIV. Here's how:
.wrapper {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
filter: blur(3px);
}
.main {
width: 100px;
height: 100px;
box-shadow: 0 0 15px rgba(0,0,0,1);
}
Upon running it, you'll notice a grid pattern in the .main DIV. Interestingly, this only occurs when there is no background set for the .main DIV and when a box-shadow is applied to it. Check out a live demo demonstrating this issue here.
My question now is, how can I prevent this from happening without adding a background to the .main DIV? I've experiment with using a drop-shadow filter, but it lacks certain features that I require as compared to box-shadow. Do I have to wait for a patch in WebKit to address this issue?
Thank you in advance!