Possible Webkit bug: hover area on items that are inline-block and rotated

[Gaber]

So I found something weird, and the googles did not bring up any answers.

I have found that if I set an item to `display: inline-block`, and `-[prefix]-transform: rotateY(20deg);`, 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()`.

In both cases, the half that appears “farthest” does not respond to hover.

It only seems to happen in Webkit browsers.

I created a simple pen to illustrate:
http://codepen.io/FStop/pen/smzfr

[TheDoc]

Very interesting! Definitely looks like a bug.

[Brian Meyer]

Interesting find detective Gaber.

I would note that the bug only appears on a left-to-right mouse hover. Right-to-left, top-down, and bottom-up all operate normally. However, the latter two still fall in to the not-hovering-void if on the left side of the block.

[Gaber]

> I would note that the bug only appears on a left-to-right mouse hover. Right-to-left, top-down, and bottom-up all operate normally. However, the latter two still fall in to the not-hovering-void if on the left side of the block.

Yes, as I mentioned, the “dead zone” seems to always be the side that is “furthest in”. So for `rotateY(-20deg)` it’s the left half, for `rotateY(20deg)` it’s the right half, for `rotateX(-20deg) it’s the bottom half, and so on.

Weird stuff.

[Chris Coyier]

I thinnnnk I’ve seen this before. I think what is going on is half the element technically sinks “below” the page, in 3D space, thus becomes unclickable. There may be some kind of way to bring it forward on the z-axis.

[Gaber]

Interesting. Adding a `translateZ(100px)` seems to solve it. It does introduce some positioning issues that need to be addressed, and I don’t know how well supported that property is. I also coludn’t figure out how to make Compass do both `rotateY()` and `translateZ()` but still.

I think Chris was on the right track about half of the element being interpreted as “below” the plane of the page in 3D space.

I’m calling it a bug. I guess now I need to look into the process of reporting a Webkit bug. Sweet! New things to learn.

Updated the pen with `translateZ(100px)`: http://codepen.io/FStop/pen/smzfr

[Author]

Posts