I'm trying to do some drawing with SVG as a div background in a Chrome extension and seeing real strange rendering artifacts. I put an image here since I don't have enough reputation to upload one... http://imgur.com/bwpcu.png
The problem is those veritcal lines which appear when I click the text. It also happens when I dismiss a window that has popped up over the element, so it seems like its any time the area is invalidated.
Here's the CSS I'm using. Not very much to it:
#helloBox li a {
display: block;
background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxtYXNrIGlkPSJtIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiByeD0iNSIgZmlsbD0iI2ZmZiIvPjwvbWFzaz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzdHJva2U9IiMwMDAiIGZpbGw9IiNGRkYiIHN0cm9rZS13aWR0aD0iMiIgbWFzaz0idXJsKCNtKSIgcng9IjUiLz48L3N2Zz4=);
color: #000;
text-decoration: none;
margin-bottom: 5px;
padding: 3px 0 3px 8px;
}
It seems like a bug in the rendering engine because this same code works on other platforms.