jquery - iOS - 单击不触发具有 CSS 3D 转换的元素

标签 jquery ios css css-transforms

这个周末我一直在做一个元素，它适用于 IE11、chrome、FF 和 Android 5.0。

但在装有 iOS8 的 iPad 上，我遇到了一些非常不一致的行为。

http://codepen.io/trgraglia/pen/emrZGP

如果您点击 Angular 上的立方体，则不会触发点击事件。

SO 让我嵌入代码。 HTML:

<div class="cluster">
  <div id="cube0_1" class="cube popable">
    <!--<div class="bottom"></div>-->
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face front"></div>
    <!--<div class="top"></div>-->
  </div>
  <div id="cube1_1" class="cube popable">
    <!--<div class="bottom"></div>-->
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face front"></div>
    <!--<div class="top"></div>-->
  </div>
  <div id="cube1_2" class="cube popable">
    <!--<div class="bottom"></div>-->
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face front"></div>
    <!--<div class="top"></div>-->
  </div>
  <div id="cube2_1" class="cube popable">
    <!--<div class="bottom"></div>-->
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face front"></div>
    <!--<div class="top"></div>-->
  </div>
  <div id="cube2_2" class="cube popable">
    <!--<div class="bottom"></div>-->
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face front"></div>
    <!--<div class="top"></div>-->
  </div>
  <div id="cube2_3" class="cube popable">
    <!--<div class="bottom"></div>-->
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face front"></div>
    <!--<div class="top"></div>-->
  </div>
  <div id="cube3_1" class="cube popable">
    <!--<div class="bottom"></div>-->
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face front"></div>
    <!--<div class="top"></div>-->
  </div>
  <div id="cube3_2" class="cube popable">
    <!--<div class="bottom"></div>-->
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face front"></div>
    <!--<div class="top"></div>-->
  </div>
  <div id="cube4_1" class="cube popable">
    <!--<div class="bottom"></div>-->
    <div class="face back"></div>
    <div class="face right"></div>
    <div class="face left"></div>
    <div class="face front"></div>
    <!--<div class="top"></div>-->    
  </div>
</div>

SCSS:

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.cluster {
  position:absolute;
  left:300px;
  top:300px;
}
/* IE does not support preserve-3d. Therefore, the vendor ms comes last and the tranform here needs to be applied to the children for the ms vender prefix. */
.cube{    
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -ms-transform-style: none;
}
.cube .face {
  width:150px;height:60px;position:absolute;bottom:0;
  outline: 1px solid transparent; /* For FF jagged edges */
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  transition: all .5s ease-out;
}
.cube .front {
  background-color:#94BFAC;
  -webkit-transform:  translateZ( 75px );
  -moz-transform: translateZ( 75px );
  -o-transform:  translateZ( 75px );
  transform:  translateZ( 75px );
  -ms-transform:   translateZ( 75px );
}
.cube .back {
  background-color:#BCD8CB;
  border-left:1px solid #BCD8CB;
  -webkit-transform:  translateZ(-75px);
  -moz-transform:  translateZ(-75px);
  -o-transform: translateZ(-75px);
  transform:translateZ(-75px);
  -ms-transform: translateZ(-75px);
}
.cube .right {
  background-color:#BCD8CB;
  -webkit-transform: rotateY(90deg) translateZ( 75px );
  -moz-transform: rotateY(90deg) translateZ( 75px );
  -o-transform: rotateY(90deg) translateZ( 75px );
  transform: rotateY(90deg) translateZ( 75px );
  -ms-transform: rotateY(90deg) translateZ( 75px );
}
.cube .left {
  background-color:#A4CCBB;
  -webkit-transform: rotateY(90deg) translateZ( -75px );
  -moz-transform: rotateY(90deg) translateZ( -75px );
  -o-transform: rotateY(90deg) translateZ( -75px );
  transform: rotateY(90deg) translateZ( -75px );
  -ms-transform:  rotateY(90deg) translateZ( -75px );
}

/* translate3d(-19px, -11px, 0) on the front and other faces for IE is due to a required offset of the pieces not lining up with the floor. This is not needed if the floor is not used. */
#cube0_1 {
  -webkit-transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,0);
  -moz-transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,0);
  -o-transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,0);
  transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,0);
  -ms-transform: none;

  .front {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,0) translateZ(75px);
  }
  .back {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,0) translateZ(-75px);
  }
  .right {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,0) rotateY(90deg) translateZ(75px);
  }
  .left {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,0) rotateY(90deg) translateZ(-75px);
  }

  .front,
  .back,
  .right,
  .left { height:120px; }

  &.popable:hover .front,
  &.popable:hover .back,
  &.popable:hover .right,
  &.popable:hover .left { height:180px; }
}

#cube1_1 {
  -webkit-transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,0);
  -moz-transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,0);
  -o-transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,0);
  transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,0);
  -ms-transform: none;

  .front {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,0) translateZ(75px);
  }
  .back {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,0) translateZ(-75px);
  }
  .right {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,0) rotateY(90deg) translateZ(75px);
  }
  .left {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,0) rotateY(90deg) translateZ(-75px);
  }

  .front,
  .back,
  .right,
  .left { height:210px; }

  &.popable:hover .front,
  &.popable:hover .back,
  &.popable:hover .right,
  &.popable:hover .left { height:270px; }

  cursor:pointer;
}

#cube1_2 {
  -webkit-transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,160px);
  -moz-transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,160px);
  -o-transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,160px);
  transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,160px);
  -ms-transform: none;

  .front {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,160px) translateZ(75px);
  }
  .back {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,160px) translateZ(-75px);
  }
  .right {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,160px) rotateY(90deg) translateZ(75px);
  }
  .left {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,160px) rotateY(90deg) translateZ(-75px);
  }

  .front,
  .back,
  .right,
  .left { height:270px; }

  &.popable:hover .front,
  &.popable:hover .back,
  &.popable:hover .right,
  &.popable:hover .left { height:320px; }

  cursor:pointer;  
}

#cube2_1 {
  -webkit-transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,0);
  -moz-transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,0);
  -o-transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,0);
  transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,0);
  -ms-transform: none;

  .front {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,0) translateZ(75px);
  }
  .back {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,0) translateZ(-75px);
  }
  .right {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,0) rotateY(90deg) translateZ(75px);
  }
  .left {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,0) rotateY(90deg) translateZ(-75px);
  }

  .front,
  .back,
  .right,
  .left { height:80px; }

  &.popable:hover .front,
  &.popable:hover .back,
  &.popable:hover .right,
  &.popable:hover .left { height:150px; }
}

#cube2_2 {
  -webkit-transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,160px);
  -moz-transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,160px);
  -o-transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,160px);
  transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,160px);
  -ms-transform: none;

  .front {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,160px) translateZ(75px);
  }
  .back {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,160px) translateZ(-75px);
  }
  .right {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,160px) rotateY(90deg) translateZ(75px);
  }
  .left {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,160px) rotateY(90deg) translateZ(-75px);
  }

  .front,
  .back,
  .right,
  .left { height:70px; }

  &.popable:hover .front,
  &.popable:hover .back,
  &.popable:hover .right,
  &.popable:hover .left { height:130px; }  
}

#cube2_3 {
  -webkit-transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,320px);
  -moz-transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,320px);
  -o-transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,320px);
  transform:rotateX(-15deg) rotateY(45deg) translate3d(0,0,320px);
  -ms-transform: none;

  .front {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,320px) translateZ(75px);
  }
  .back {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,320px) translateZ(-75px);
  }
  .right {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,320px) rotateY(90deg) translateZ(75px);
  }
  .left {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(0,0,320px) rotateY(90deg) translateZ(-75px);
  }

  .front,
  .back,
  .right,
  .left { height:80px; }

  &.popable:hover .front,
  &.popable:hover .back,
  &.popable:hover .right,
  &.popable:hover .left { height:130px; }
}

#cube3_1 {
  -webkit-transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,160px);
  -moz-transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,160px);
  -o-transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,160px);
  transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,160px);
  -ms-transform: none;

  .front {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,160px) translateZ(75px);
  }
  .back {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,160px) translateZ(-75px);
  }
  .right {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,160px) rotateY(90deg) translateZ(75px);
  }
  .left {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,160px) rotateY(90deg) translateZ(-75px);
  }

  .front,
  .back,
  .right,
  .left { height:150px; }

  &.popable:hover .front,
  &.popable:hover .back,
  &.popable:hover .right,
  &.popable:hover .left { height:210px; }

  cursor:pointer;
}

#cube3_2 {
  -webkit-transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,320px);
  -moz-transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,320px);
  -o-transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,320px);
  transform:rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,320px);
  -ms-transform: none;

  .front {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,320px) translateZ(75px);
  }
  .back {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,320px) translateZ(-75px);
  }
  .right {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,320px) rotateY(90deg) translateZ(75px);
  }
  .left {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-160px,0,320px) rotateY(90deg) translateZ(-75px);
  }

  .front,
  .back,
  .right,
  .left { height:110px; }

  &.popable:hover .front,
  &.popable:hover .back,
  &.popable:hover .right,
  &.popable:hover .left { height:170px; }

  cursor:pointer;
}

#cube4_1 {
  -webkit-transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,320px);
  -moz-transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,320px);
  -o-transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,320px);
  transform:rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,320px);
  -ms-transform: none;

  .front {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,320px) translateZ(75px);
  }
  .back {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,320px) translateZ(-75px);
  }
  .right {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,320px) rotateY(90deg) translateZ(75px);
  }
  .left {
    -ms-transform:translate3d(-19px, -11px, 0) rotateX(-15deg) rotateY(45deg) translate3d(-320px,0,320px) rotateY(90deg) translateZ(-75px);
  }

  .front,
  .back,
  .right,
  .left { height:60px; }

  &.popable:hover .front,
  &.popable:hover .back,
  &.popable:hover .right,
  &.popable:hover .left { height:130px; }
}

JS-jQuery:

$(document).on('click', '.cube .face', function(){
  alert($(this).parent().attr('id') + ' ' + $(this).attr('class'));
});

欢迎所有想法!谢谢。

最佳答案

这个解决方案让我抓狂!

我需要将 cursor:pointer; 的 CSS 属性和值添加到可点击区域。难以置信!

How do I use jQuery for click event in iPhone web application

关于jquery - iOS - 单击不触发具有 CSS 3D 转换的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28661146/

上一篇：html - Gmail 不接受 &lt;style&gt; 和 @import css 方法

下一篇：css - 如何在 CSS 中选择另一个内部的元素？

相关文章：

javascript - 如何将自动定时器设置为内容幻灯片？

php - 如何通过来自 php 的变量更改 jQuery 中的数值

jquery - jquery垂直选项卡中点击不同选项卡时如何使页面滚动到顶部

iphone - 将证书链存储在应用程序钥匙串(keychain)中

html - 设置 Bootstrap

css - 这张表是否不允许 CSS 正常运行

javascript - $.getJSON 触发选择更改事件

ios - 如何在 osx 计算机中将 Apple 配置文件从一个用户传输到另一个用户？

ios - 如何删除特定区域的手势识别器？井字游戏

javascript - 无法突出显示可切换的 div 内的代码

©2024 IT工具网  联系我们