You can fix it by removing the .hoverArea
element and instead apply the :hover
event on the .flip
element.
.flip:hover {
-webkit-transform: rotatex(-180deg);
}
If you want to still use the .hoverArea
element then you can use transform:translateZ(1px);
on .hoverArea
to make it function correctly. It makes the browser render the element more carefully
.hoverArea {
z-index: 10;
-webkit-transform:translateZ(1px);
}