Hover not triggered on the right half of elements that have both rotateY and rotate applied. What seems to fix it: - Removing transform: rotate(Xdeg) - Having only element on the whole page Works fine in Firefox 9/10 (Firefox with csstransform3d support)
Having a default rotate of 0 (zero) applied to the global/shared class ".flip" seems to fix the issue. .flip - global/shared class .block-a, .block-b, etc - are individual block modifier classes For example, .block-r had rotate(1deg) and the issue will appear. Applying rotate(0) to .flip fixes the hover area issue.
Can repro on Chrome Canary and WebKit nightly on Mac OS X.
*** Bug 69841 has been marked as a duplicate of this bug. ***
I am not sure if this is related or a separate bug. It is similar: I have found that if I set an item to display: inline-block, and rotate(Xdeg);, the hover area for that item reduces to half the width of the item on rotateY(), and half the height of the item on rotateX(). display: block; items do not seem to be affected, and it only seems to happen in Webkit browsers. In both cases, the half of the element that appears "farthest" does not respond to hover. As suggested by Chris Coyier in the thread I posted on csstricks.com: http://css-tricks.com/forums/discussion/comment/106207/#Comment_106207 it seems like the browser interprets half of the image to be below or behind the plane of the page. I did notice that if I add a translateZ() of at least 15px in the example below it does solve the issue. I created a simple pen to illustrate: http://codepen.io/FStop/pen/smzfr
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.