CODEWITHSUNDEEP
jqueryhtmlcss
Victor
Victor

Reputation: 3517

Click does not come after CSS3 transformation

I have the problem under Chrome/Safari browsers. After applying CSS3 transformation I don't receive mouseup and click events (under IE9/10 it work very well).

This is my not working sample:

<script type="text/javascript">
    $(".box").mousedown(function (e) {
        $(this).addClass('transform');
    });

    $(".box").mouseup(function (e) {
        $(this).removeClass('transform');
    });

    $(".box").click(function (e) {
        alert("Click"); // Not worked under Chrome/Safari !
    });
</script>

<div class="box"></div>

and CSS3 style:

.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);
}

Upvotes: 1

Views: 2982

Answers (3)

smaudet
smaudet

Reputation: 636

There are a couple reasons this may happen. One of them, as mentioned, is that the position:absolute should be set on a parent somewhere.

However, there is also currenty a bug in webkit (and likely the other browsers) where a transformZ value is randomly computed for a transformed face. The solution is hence to apply:

-webkit-transform:translateZ(0px);
-moz-transform:translateZ(0px);
transform:translateZ(0px);

to the element which is giving you interactivity problems. This worked for me on a div element which was transformed with a bunch of nested child elements, and would intermittently give me click feedback at different angles. I know this is what is happening, because I was able to 'fix' the issue by moving one of the child elements over beyond the edge of the parent element, meaning that the parent element was invisibly obscuring the child element.

However it should be mentioned this fix also appeared to solve a bunch of other problems with the Z-depth of subsequent child elements, which really should not have existed in the first place. This suggests a simple looping render bug, meaning this 'fix' may break with future updates of browsers as the devs tweak the render routines.

Upvotes: 2

smaudet
smaudet

Reputation: 636

This is a browser bug with webkit. The clicks will work fine as long as you are very careful to cancel out any z-transform (correctly - simpler is better).

Firefox and IE both will handle the clicks despite their z-transform.

The position:absolute may work for some, but it is an inappropriate solution to a browser failure.

Upvotes: 2

Luis
Luis

Reputation: 5914

The problem is that you needed to set position:absolute:

.transform {
    transform-origin: 0% 50%;
    transform: rotateY(30deg);
    -ms-transform-origin: 0% 50%;
    -ms-transform: rotateY(30deg);
    -webkit-transform-origin: 0% 50% 0px;
    -webkit-transform: rotateY(-31deg);
}​

Check this Demo UPDATED 2

You can check this links about transformation

Upvotes: 3

Related Questions