Weird Vertical Lines in Chrome and How to Fix Them

October 28th, 2012

I'm currently working on a holiday inspired website for a client that has to support old versions of Internet Explorer. The site's background has several div tags that use a custom font to represent snowflakes. When you click a snowflake a box appears with a gift inside. I got this to work everywhere except Chrome, which would occasionally have a several pixel wide gap in the box's background image. I was using CSS3 to transform the box's size and position and good old CSS1 top & left to position the snowflakes. That got me thinking. Perhaps Chrome was using hardware acceleration for the CSS3 transform and just the regular CPU for the snowflakes. And if there were two different rendering modes then maybe they had issues compositing their images. I had seen this plenty of times with Flash and HTML. You would have to set wmode transparent to get Flash rendered in the same z-index as HMTL. To test my theory I wrote a little code to remove any webkit-transform after I was done scaling and repositioning it. Much to my surprise it worked.

Its bugs like these that drive developers insane. The funny thing is if I didn't have to support IE 7 & 8, I would of been using a different technique for moving my snowflakes and probably never would of run into this issue. Lesson learned and time to add another random fact to the back of my brain.