- This topic is empty.
June 6, 2013 at 5:16 pm #45350
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/smzfrJune 6, 2013 at 5:24 pm #137887TheDocMember
Very interesting! Definitely looks like a bug.June 6, 2013 at 5:26 pm #137888Brian MeyerParticipant
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.June 6, 2013 at 6:53 pm #137900
> 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.June 6, 2013 at 9:48 pm #137905Chris CoyierKeymaster
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.June 7, 2013 at 2:38 pm #138017
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
- The forum ‘CSS’ is closed to new topics and replies.