Android机型 translate-3d的点击穿透问题

发表于

某元素

1
tranform: translate3d(0px, 0px, 36px);

点击浮层会有点击穿透问题

解决方法：

  • 父元素：
1
2
transform-style: preserve-3d; //使被转换的子元素保留其 3D 转换：
-webkit-transform-style: preserve-3d;
  • 子元素：
1
2
transform: translateZ(100px);
-webkit-transform: translateZ(100px);

只要子元素的translateZ值大于某元素translate3d中z轴的值，则点击子元素，不会发生点击穿透；