I have this very annoying thing in Google Chrome. I have a grid in my page that looks like Pinterest's one, but it is made using only CSS. http://imgur.com/a/M7dtI I have one div that has all those column count properties etc. In that div there are "pin" divs which correspond to each individual image or "pin". And inside that div there is an img tag. When I didn't apply any hover effects to the img tag, everything was fine. I tried many effects: scaling, moving using translate, changing width, height, rotation and filter. But when any of mentioned effects if applied and I hover over an image(The middle one for example), it disappears. It is still there when I look in the inspector code, but I can't see it. (http://imgur.com/a/mYVRd) I tried the same in Mozilla firefox and there were no weird behaviors. Could there be fault in my code or it is just my browsers response?
I should use Google a little bit more. I am sorry for asking questions without spending at least 30 minutes searching for the answer. I will be more careful next time! If anyone is having the same bug as I do, this is the answer: This is Chrome bug that sometimes appears for some reason. All absolute-positioned elements inside hardware-accelerated container (e.g. slides) must have rsAbsoluteEl class, or just such css styles to force hw acceleration on element that blinks: That text is from one website. You must use these property (Should fix the bug): -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0);