Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

webkit transform blocking link

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.

like image 281
MysterFitz Avatar asked Jun 04 '12 18:06

MysterFitz


1 Answers

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

like image 64
MysterFitz Avatar answered Oct 20 '22 00:10

MysterFitz