移动端ios:active失效的解决方法

最近在做一个公众号，前端页面使用的vue，做的是一个扭蛋机抽奖页面，其中遇到了一些问题，做以下总结：
1、增加transform层级问题

image.png

按钮层级跑到了活动弹窗的上面，在按钮父级的元素上我使用了 transform: rotateX(60deg)代码如下：

.btn-container {
    width: 24vw;
    transform-style: preserve-3d;
    margin-top: 25vw;
    margin-right: 8.8vw;
    transform: rotateX(60deg);
    -ms-transform: rotateX(60deg);
    -moz-transform: rotateX(60deg);
    -webkit-transform: rotateX(60deg);
    -o-transform: rotateX(60deg);
    position: relative;
    z-index: 88;
  }

具体解决方法：

在有-transform的元素的任意父级添加overflow:hidden;

2、按钮有一个按下的效果active伪类无效问题
具体解决方法如下：

<button v-on:touchstart="() => {}" class='btn-wrapper' @click="play()"></buton>

好了今天就总结到这里，欢迎大家关注我的公众号前端小喵，更多文章等你~