54371 2011-02-13 17:36:10 -0800 Left Half of Flipped Element is not Interactive (3D Transforms) 2022-06-12 15:31:15 -0700 1 1 1 Unclassified WebKit Layout and Rendering 528+ (Nightly build) Mac (Intel) OS X 10.6 RESOLVED CONFIGURATION CHANGED http://hollow-wind-62.heroku.com/ P2 Normal --- 0 mattga webkit-unassigned ahmad.saleem792 ap djmadeira marbleman mattwoodrow rniwa simon.fraser sims39 oldest_to_newest 350494 0 mattga 2011-02-13 17:36:10 -0800 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 350676 1 simon.fraser 2011-02-14 08:37:18 -0800 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. 350682 2 mattga 2011-02-14 08:42:50 -0800 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. 351072 3 mattga 2011-02-14 19:58:03 -0800 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. 351225 4 mattga 2011-02-15 06:50:46 -0800 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. 833103 5 marbleman 2013-02-14 08:32:12 -0800 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 922820 6 sims39 2013-08-29 23:22:56 -0700 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> 1035525 7 djmadeira 2014-09-16 11:48:07 -0700 I am also running into this issue: http://codepen.io/djmadeira/pen/HJeLz It seems to be fixed in webkit nightly. 1875381 8 ahmad.saleem792 2022-06-11 04:01:43 -0700 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! 1875452 9 ap 2022-06-12 15:31:15 -0700 Thank you for testing!