Menu
On Chrome on OSX, rotating a element in 3D and performing the inverse of the rotation on a child element breaks mouse events on the child including any links. The hit area seems to be misaligned.
The dom structure is:
<div class='test'>
<div><a href='http://www.google.com'>Click me</a></div>
</div>The above dom structure is also on JSFiddle
Does anyone know a workaround using the same dom structure that preserves the correct click area?
606
if a DOM element has an event connected to it for example a click element and you rotate it 90 degrees the element is still at that location but you can't click on it due to it being flat. DOM elements have a zero depth so when you rotate a DOM element 90 degrees you can't see it. if you rotate that same element back you will see it and the click event works. technically the click area works when the element is rotated 90 degrees it just has a zero point area to be clicked.
For the people that do not believe that the event is still attached test this out and see for your self. The event will stay connected to the element no matter how many transformation you do. It also works for chrome. This also works for links too. The only time an event is removed is when you remove the event or remove the element. transformation will never remove the event or the element.
document.getElementById("testButton").addEventListener("click", function() {
alert("It works");
});
document.getElementById("flipButton").addEventListener("click", function() {
if (document.getElementById("testButton").style.webkitTransform == "rotateX(0deg)") {
document.getElementById("testButton").style.webkitTransform = "rotateX(90deg)";
document.getElementById("test").style.webkitTransform = "rotateX(90deg)";
} else {
document.getElementById("testButton").style.webkitTransform = "rotateX(0deg)";
document.getElementById("test").style.webkitTransform = "rotateX(0deg)";
}
});<html>
<body>
<button id='testButton'>test button</button>
<div id='test'>
<div><a href='http://www.google.com'>Click me</a></div>
</div>
<button id='flipButton'>transform button</button>
</body>
</html>Here is an example using your example:
.test {
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX( 90deg);
}
.test>* {
-webkit-transform: rotateX( -90deg);
}<html>
<body>
<div id='test'>
<div><a href='http://www.google.com'>Click me</a></div>
</div>
</body>
</html>You will notice that it still works. The reason your code is not working is that your href you have href='htpp://boom'. The URI htpp://boom is not a real address.
There is no such thing as htpp:// and boom is not an address. Your bug in your code has nothing to do with transformation and nothing to do with css. Your bug is not using a real URI.
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
