Encountering an issue with Chrome/Safari browsers. Following the application of CSS3 transformation, the mouseup and click events are not being triggered (though they work fine in IE9/10).
Here is an example of the non-functional code:
<script type="text/javascript">
$(".box").mousedown(function (e) {
$(this).addClass('transform');
});
$(".box").mouseup(function (e) {
$(this).removeClass('transform');
});
$(".box").click(function (e) {
alert("Click"); // Issue persists in Chrome/Safari
});
</script>
<div class="box"></div>
along with CSS3 styling:
.box {
background-color:#f00;
width:200px;
height:200px;
}
.transform {
transform-origin: 0% 50%;
transform: rotateY(10deg);
-ms-transform-origin: 0% 50%;
-ms-transform: rotateY(10deg);
-webkit-transform-origin: 0% 50%;
-webkit-transform: rotateY(10deg);
}