webkit transform blocking link

12
votes

I've been working with transforms and transitions to create animated UI components without Javascript and really enjoying the results, but I've come across a disturbing issue that appears to be unique to webkit browsers.

On an element which I have rotated, an anchor that spans 100% of the width of the element is only accessible on the right 50% of the element.

This problem does not exist using -moz-transform in Firefox, but is 100% reproducible in both Chrome and Safari using -webkit-transform.

Here is the code:

<!doctype html>
<html>
<head>
<title>webkit spincard test bed</title>
<style type="text/css">
    #card-lists{
width:100%;
float:left;
}
#card-lists ul{
list-style:none;
}
#card-lists ul li{
width:230px;
height:236px;
}
.non-mobile #card-lists ul.card-list li .flipcard-container:hover .flipcard,
.non-mobile #card-lists ul.card-list li .flipcard-container.hover .flipcard{
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform-style: preserve-3d;
    -moz-transition: all 0s linear 0s;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 0s linear 0s;
}
.non-mobile #card-lists ul.card-list li .flipcard{
    -moz-transform: rotateY(0deg);
    -moz-transition: all 0s linear 0s;
    -webkit-transform: rotateY(0deg);
    -webkit-transition: all 0s linear 0s;
    width:230px;
    height:236px;
}
.face {
    position: absolute;
    width: 100%;
    height: 100%;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.face.back {
background-color: #125672;
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}
.face.front {
    background-color:#000;
}
</style>
</head>
<body class="non-mobile">
<div id="card-lists">
<ul class="card-list" id="cardes-list-total">
    <li>
    <div class="flipcard-container">
        <div class="flipcard">
            <div class="front face">
                <a href="#">
                <div style="width:100%; height:100%;">
                </div>
                </a>
            </div>
            <div class="back face">
                <a href="#">
                <div style="width:100%; height:100%;">
                </div>
                </a>
            </div>
        </div>
    </div>
    </li>
</ul>
</div>
</body>
</html>

Any help anyone could offer would be greatly appreciated as I've already spent an inordinate amount of time on the issue.

2
csswebkitcss-transitionscss-transforms
FWIW I've seen bugs in the past with text hyperlinks in transformed elements on webkit (sometimes the hyperlinks simply don't work). So you're not crazy – Michael Mullany
Thanks Michael. The code was much more complex in its original state and, over the course of whittling it down to just the stuff necessary to demonstrate the issue, I became convinced of my sanity. But that just makes me sane and ineffective, which is only moderately better than crazy and ineffective. ;) – MysterFitz

2 Answers

20
votes

After combing through the webkit Bugzilla, I found someone who had the same issue and found a workaround.

.face.back {
    background-color: #125672;
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

Becomes:

.face.back {
    background-color: #125672;
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg) translateZ(1px);
}

The addition of the translateZ to the transform makes the left side of the element clickable.

Here is a link to the bug: https://bugs.webkit.org/show_bug.cgi?id=54371

1
votes

I used this code below

<style>    
.outer div {
        float: left;
        -webkit-perspective: 200px;
        -webkit-transform-style: preserve-3d;
    }
.outer a {
        -webkit-transition: all 1.0s ease-in-out;
        background:#0F6;
        width:100px;
        height:100px;
        display:block;
        -webkit-transform: rotateY(45deg);
    }
.outer div:hover a {
        -webkit-transform: none;
    }
</style>

<div class="outer">
    <div>
        <a href="http://www.google.com/"></a>
    </div>
</div>

This solution works for me in chrome. http://jsfiddle.net/jaxweb/7qtLD/7/