Webkit Transform Blocking Link

webkit transform blocking link

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

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

CSS - Transform function not working on links?

You should use display: inline-block for <a> tag (or display: block), because <a> has display: inline by default, but transformable element can't be with display: inline:

Transformable element — an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or ...

Inline-block — this value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

ul {    list-style-type: none;}
ul a {    text-decoration: none;    padding-left: 20px;    background-repeat: no-repeat;    display: inline-block;}
ul a:hover {    text-decoration: underline;    color: #666;    -webkit-transform: scale(0.9);    -moz-transform: scale(0.9);    -ms-transform: scale(0.9);    transform: scale(0.9);}
a[href $= '.pdf'] {    background-image: url(http://i.stack.imgur.com/zJlYq.gif);}
a[href $= '.doc'] {    background-image: url(http://i.stack.imgur.com/z2lbW.gif);}
a[href $= '.ppt'] {    background-image: url(http://i.stack.imgur.com/Tk5Vv.gif);}
a[href $= '.xls'] {    background-image: url(http://i.stack.imgur.com/sOr7E.gif);}

<ul>    <li><a href="/one.pdf">pdf</a></li>    <li><a href="/two.doc">doc</a></li>    <li><a href="/three.ppt">ppt</a></li>    <li><a href="/four.xls">xls</a></li></ul>

#logoemailcol {
  position: relative;
  cursor: pointer;
}
#logoemailcol:hover #logoem {
  transform: scale(1.15);
}
#logoem {
  display: inline-block;
  transition: all 0.5s;
}

<div id="logoemailcol">
  <a href="" id="logoem" target="_blank">
    <img src="https://cdn1.iconfinder.com/data/icons/simple-icons/2048/email-2048-black.png" style="width: 30px; height: 30px;">
  </a>
</div>

.btn:link,.btn:visited {  text-transform: uppercase;  padding: 15px 40px;  text-decoration: none;  border-radius: 100px;  transition: all .2s;  display: inline-block;}
.btn-white {  background-color: white;  color: #777;}
.btn:hover {  transform: translateY(-30px);}
.btn:active {  transform: translateY(-10px);}

<div class="text-box">  <h1 class="primary-header">    <span class="heading-primary-main">Outdoors</span>    <span class="heading-primary-sub">is where life happens</span>  </h1>  <a href="#" class="btn btn-white">Discover Our Tours</a></div>

mc c ftl:before, mc c ftr:before, mc c fbr:before, mc c fbl:before{
    box-sizing: border-box;
    -moz-box-sizing: border-box; /*Added Mozilla Prefix*/
    display: block;
    border: solid 10px navy;
    width: 200%; 
    height: 200%;
    border-radius: 50%;
    -webkit-transform: skewX(-0deg);
    -moz-transform: skewX(-0deg);
    -ms-transform: skewX(-0deg);
    -o-transform: skewX(-0deg);
    transform: skewX(-0deg);
    content: '';
    position: absolute;
    z-index: 999;
}