webkit transform blocking link

by

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

More Related Contents:

  1. How to prevent Webkit text rendering change during CSS transition
  2. css3 transition animation on load?
  3. Prevent flicker on webkit-transition of webkit-transform [duplicate]
  4. Hover effect : expand bottom border
  5. Simulating transform-origin using translate
  6. CSS transition shorthand with multiple properties?
  7. Spin or rotate an image on hover
  8. Flip a 3D card with CSS
  9. CSS3 Transform affecting other elements with chrome/safari
  10. Delay mouseout/hover with CSS3 transitions
  11. Why does enabling hardware-acceleration in CSS3 slow down performance?
  12. How can I force WebKit to redraw/repaint to propagate style changes?
  13. css z-index lost after webkit transform translate3d
  14. What are -moz- and -webkit-? [duplicate]
  15. Transition background-color via slide animation
  16. How can I transition width of content with width: auto?
  17. Using CSS transitions in CSS Grid Layout
  18. Pure CSS scroll animation
  19. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  20. CSS transition with visibility not working
  21. ‘Inverted’ border-radius possible? [duplicate]
  22. CSS how to make an element fade in and then fade out?
  23. CSS3 transform on click using pure CSS
  24. CSS3 Transition – Fade out effect
  25. Wonky text anti-aliasing when rotating with webkit-transform in Chrome
  26. when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I’m animating an element with a border
  27. CSS transition between left -> right and top -> bottom positions
  28. CSS transition fade in
  29. CSS3 transitions on pseudo-elements (:after, :before) not working?
  30. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?

Leave a Comment