CSS3 Rotation transition causing intermittent mouse click detection

Question

This is a very similar issue to CSS3 Rotate on animated element causing click event not to invoke

Although my issue is a tad different, plus can't comment on it to add supporting information.

Checkout my sandbox: http://jsfiddle.net/5bsG3/2/

I have a span inside a link which rotates around the Y axis, on mouse hover. The click event (for jQuery or simply for link navigation) is not always detected. Try clicking on the padded region of the link (just off the text but on the link). It's almost as if there's an issue with hit detection because the span is spinning and thus at angles where the mouse isn't clicking on the span. Even though the mouse still clicking on the padded region of the LINK. Angles around 70-110deg seem to be the problem.

The proposed solution in the aforementioned post doesn't actually fix this issue. Also, my issue maybe a tad different since my rotation is handled as a CSS transition instead of a JS interval trigger.

Any thoughts? Has anyone seen this before? I know this is a cheesy way of doing links but for the target website, it's an acceptable amount cheese.

Feel free to simplify the jsfiddle, I started simple and added a bit of debugging info to help identify the problem.

html:

<ul>
  <li><a href="" class="flip-link"><span>Click this link</span></a></li>
  <li id="LinkCounter">LinkClicked</li>
  <li>&nbsp</li>
  <li id="SpanCounter">SpanClicked</li>
<ul>

css:

ul li
{
    display: inline;
    float: left ;
}

.flip-link
{
    float:left ;
}

span
{
    float:left ;
}


.flip-link {
    display: block;
    overflow: hidden;

    height: 20px;
    padding: 5px 50px 7px 50px ;
    margin-right: 10px ;

    background: #AAA;

    -webkit-perspective: 50px;
       -moz-perspective: 50px;
        -ms-perspective: 50px;
            perspective: 50px;

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;
}

.flip-link span {
    display: block;
    position: relative;

    background: #EEE;

    padding: 0px 10px ;

    -webkit-transition: all 1000ms ease;
       -moz-transition: all 1000ms ease;
        -ms-transition: all 1000ms ease;
            transition: all 1000ms ease;

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;

}
    .flip-link:hover span
    {
        -webkit-transform: translate3d( 0px, 0px, 0px ) rotateY( 360deg );
           -moz-transform: translate3d( 0px, 0px, 0px ) rotateY( 360deg );
            -ms-transform: translate3d( 0px, 0px, 0px ) rotateY( 360deg );
                transform: translate3d( 0px, 0px, 0px ) rotateY( 360deg );

        color: #55FF55 ;
    }

JS:

var linkClickCount = 0 ;
var spanClickCount = 0 ;

$(document).ready(function () {
    $('.flip-link').click(function () {
            linkClickCount++ ;            
            $("#LinkCounter").text(linkClickCount);

            return (false);
    });

    $('.flip-link span').click(function () {
            spanClickCount++ ;            
            $("#SpanCounter").text(spanClickCount);
    });
});

Answer 1

The problem. Since there are browser desparities using CSS, and even desparities between browsers, you will have issue using a pure CSS solution. You also have to realize that CSS actually collapses your divs when they are in the middle of an animation. our vision is not actually what is going on, its actually collapsing the div size to 0, meaning when you click you wont be able to "actually click it. below, shows you should put an absolute positioned div as an overlay and handle the click even from a clear, non visible div that will still have the illusion of you actually clicking a link.

<a id="link"></a>

 $("#link").click(function(){

spanClickCount++;
$("#SpanCounter").text(spanClickCount);

}