Chrome rendering error with position absolute and css3

Question

I've been wrecking myself trying to figure out what is going on with this big of html. It renders correctly in latest Firefox, Safari and on chrome canary, but normal chrome renders these weird lines and I have no idea why.

I've create a JS fiddle with an excerpt of my code, it's part of a much larger project, but I'm seeing the rendering issue in the fiddle as well as in my app. I've attached a screen shot of what I'm seeing in the fiddle for reference.

Fiddle

Bug screenshot:

The red middle line shouldn't be there as well as the line to the left of "close". This is just one example, as I mouse over the modal I get lines appearing all over the place.

It makes for a less than stellar question as it's difficult to replicate. Resizing the browser helps to show the error. My fiddle has quite a bit of html and css. I don't expect anyone to actually comb through it and fix the issue. I just want to be thorough in presenting the problem.

I've tried looking online but I haven't been able to find anyone reporting the same issue as far as I can tell.

If anyone has any ideas on what may be causing this, how to fix it or point me to a relevant link/SO question I'd be very grateful.

Things I've ruled out/investigated: - not caused by something else on the page, as I extracted it into jsfiddle and it's still hapenneing. I also removed the body content using the console in my app and it didn't make a difference. - I dont think the gradients or transitions are causing it, as removing them didn't seem to have an effect - possibly/probably related to absolute positioning? When I removed the position absolute on the main wrapper element I didn't see this occuring. - I read that applying a z-index to these elements might help, but it did nothing for these issues.

TL,DR: Why does google chrome, but not canary or safari, show rendering errors on absolutely positioned elements with liberal use of css3 gradients, shadows and transitions?

Answer 1

When I remove the '-webkit-transform: scale(0.95)' on #vfs_uploader and the '-webkit-transform: scale(1)' on #vfs_uploader.visible, it displays fine: http://jsfiddle.net/cjc343/fzqPT/2/

I don't know how this affects Safari or if it has other implications in Chrome, but it does not appear to otherwise affect the layout in the example.