I got a rather strange problem. I have a div that can be rotated through CSS3. The div has a child div and a back child div, and the back div has -webkit-transform: rotateY( 180deg ) .
The problem is that as soon as the parent element is rotated to display the back of the div, it will detect clicks of the child elements on only one side of the div, in particular the second half of the div or the right side. The front of the front detects clicks over the entire surface of the element. In addition, z-indices are exact. I assume that the problem could be caused by the rotation, and the browser displays half the side “closer”?
The code that breaks this is extremely complex, so I created a test file to demonstrate the problem below. I am using the jQuery plugin that I wrote for 3D transforms, which can be found here https://github.com/pwhisenhunt/jquery.transform/blob/master/jquery.transform.js .
Edit: After experiments, a click of a button element is registered only with 100-200 pixels, and not with 0-100 pixels. In other words, it is actually only registered in the second half of the div.
Any help is much appreciated!
<html> <head> <style> .element{ width:200; height:200; -webkit-perspective: 800; -webkit-transform-style: preserve-3d; } .element figure { display: block; height: 100%; width: 100%; position: absolute; -webkit-backface-visibility: hidden; border:1px solid yellow; } .element .front { -webkit-border-radius:8px; padding: 0px; margin: 0px; background-color:yellow; z-index: 9870; } .element .back { -webkit-border-radius:8px; padding: 0px; margin: 0; -webkit-transform: rotateY( 180deg ); z-index: 0; border: 1px solid red; background-color:green; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="https://raw.github.com/pwhisenhunt/jquery.transform/master/jquery.transform.js"></script> <script> $(function(){ var temp = false; $(".element").click(function(){ if(temp == false){ $(this).transform("setAnimationDuration", 1).transform("rotateY", 180); $(this).unbind("mouseenter mouseleave"); button = $(document.createElement('div')).attr("id", "button").css({ width: 200, height: 50, backgroundColor:"blue" }); button.click(function(){ console.log("Clicking"); }); temp = true; $(this).append(button); } }) }) </script> </head> <body> <div class="element"> <figure class="front"></front> <figure class="back"></front> </div> </body> </html>
JSFiddle An example of a problem - can be found HERE!
source share