Bug 54371 - Left Half of Flipped Element is not Interactive (3D Transforms)
Summary: Left Half of Flipped Element is not Interactive (3D Transforms)
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Macintosh Intel OS X 10.6
: P2 Normal
Assignee: Nobody
URL: http://hollow-wind-62.heroku.com/
Depends on:
Reported: 2011-02-13 17:36 PST by mattga
Modified: 2014-09-16 11:48 PDT (History)
4 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description mattga 2011-02-13 17:36:10 PST
Based on Apple's card flip demo, I have developed a ui where you can click and drag cards around, and sometimes they can be flipped, revealing the other side.

In this flipped state, a card's left half does not trigger any mouseover events or :hover CSS rules. It affects Mobile Safari, Safari, and Chrome.

Link to View Problem:
You can manually flip any card by clicking or touching any card for up to a second.

Source Code:
Comment 1 Simon Fraser (smfr) 2011-02-14 08:37:18 PST
A small testcase would be useful.

The issue is that the flipped card is co-planer with its parent, in which case the hit-testing order is undefined. You have odd uses of -webkit-perspective and -webkit-transform-style in your content that would be easier to figure out in a simple testcase.
Comment 2 mattga 2011-02-14 08:42:50 PST
Ok, I will reduce the code into a simple test case. I will either strip down the current ui as much as possible, or try to rebuild a page that exhibits the same bug.
Comment 3 mattga 2011-02-14 19:58:03 PST

This link demonstrates the vertical split in the hover state of the card face.

Basically, it's the Apple card flip demo, with a hover state. You can click either the button or the card to flip the element.
Comment 4 mattga 2011-02-15 06:50:46 PST
I've produced a version where the two card faces are not co-planar, by applying a transformZ of 1px to the back face.

Here's a link:

I'm not sure if this issue is a real bug after all.

I will say that it was confusing that the back face was visible and not completely interactive.
Comment 5 Bernd 2013-02-14 08:32:12 PST
Sorry for posting on such an old issue, but after hours of search this was the only information that helped me to find a workaround for the problem:

So I think this was really a bug and it still is!!
I created three faces of the same size forming a 3D triangle. I can rotateY the triangle to 0deg, 120deg, 240deg to make each face visible to the user.

At 0deg I can interact with the content, e.g. mark text, hover, click links. At 120deg and 240deg I cannot interact with the content. It seems as if it is "behind glas" but there is really no overlaying content!

When I turn the triangle by 60deg it seems that the part of the face that comes out in z-direction (z > 0 due to the perspective) is interactive while the part that goes in the depth of the screen (z < 0) is not interactive anymore.

Hope you understand my poor description...

I cannot use a translateZ() on the triangle itself since the z-axis rotates with the object.

However, I could add a tranlateZ(1px) to the parent div  having no visual effect at all (even a 100px do not). But since I did, all sides of my triangle are interactive.

So it really seems as if there is a sort of glas screen at z=0 that blocks interaction with content behind it.

Tested with: 
Chrome Version 23.0.1271.64
Safari 5.1.7
Safari 6 on iOS

Same transformations work fine on all other browsers
Comment 6 simzy39 2013-08-29 23:22:56 PDT
I am experiencing this bug with file:///C:/Users/simzy/Desktop/testing%20aaryon/index.html
The links on the cards work in Firefox, but the top half of the card doesn't allow the link to work.

I am using:

.fadeineffect {
-webkit-transform: perspective(400px) rotateX(50deg) rotateY(0deg) rotateZ(0deg);
-moz-transform: perspective(400px) rotateX(50deg) rotateY(0deg) rotateZ(0deg);
-o-transform: perspective(400px) rotateX(50deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: perspective(400px) rotateX(50deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(400px) rotateX(50deg) rotateY(0deg) rotateZ(0deg);

And then just 
 <a href="img/model1.jpg" data-lightbox="image-1" title=""><img src="card1.jpg" width="84" height="127" alt="" class="fadeineffect" /></a>
Comment 7 DJ Madeira 2014-09-16 11:48:07 PDT
I am also running into this issue: http://codepen.io/djmadeira/pen/HJeLz

It seems to be fixed in webkit nightly.