Question

I am having a weird problem with Chrome.
If I flop an image using -webkit-transform, show another div on top it and then hide the div, part of the image is showed in background as some sort of ghost image.

Here is the fiddle
http://jsfiddle.net/fahadnabbasi/d4erm/

The problem is only in chrome.

I am using Mac OS X and latest version of chrome for mac.

Please please held me as I am out of options here

Answer 1

if you remove -webkit-transform: matrix(1, 0, 0, -1, 0, 0); the issue no longer appears
try instead

-webkit-transform: rotateX(180deg); 
-webkit-transform-origin: 50% 28%; 

example fiddle : http://jsfiddle.net/JHFQV/