Bug 54371 – Left Half of Flipped Element is not Interactive (3D Transforms)

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: Layout and Rendering

Background:
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.

Problem:
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:
http://hollow-wind-62.heroku.com/
You can manually flip any card by clicking or touching any card for up to a second.

Source Code:
https://github.com/deleteme/mtg-play-tester-ui

[Simon Fraser (smfr)]

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.

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.

http://jsbin.com/aqipu6/11

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.

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:
http://jsbin.com/ivezi4/5

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.

[Bernd]

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

[simzy39]

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>

[DJ Madeira]

I am also running into this issue: http://codepen.io/djmadeira/pen/HJeLz

It seems to be fixed in webkit nightly.

[Ahmad Saleem]

I am unable to reproduce this bug using CodePen in Comment 07 and JSBin in Comment 03 / Comment 04 using Safari 15.5 on macOS 12.4. I think it has been fixed down the line. It works similar to the browsers (Chrome Canary 104 and Firefox Nightly 103). I think it got fixed down the line and Comment 07 do mention that it was not happening in Webkit Nightly during 2014.

This can be marked as "RESOLVED CONFIGURATION CHANGED". Thanks!

[Alexey Proskuryakov]

Thank you for testing!