webkit transform blocking link

Question

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: ``` webkit spincard test bed

Accepted Answer

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

webkit transform blocking link

Solution

Problem