记一次奇葩的错误，uniapp @tap点击失效

先说问题原因，css 中使用了卡片翻转效果，会将卡片背面翻转隐藏，但是没有完全隐藏起来。使用：transform: translateZ(1px); 将失效元素层级提高，问题解决。

异常说明

下面这段uniapp代码在微信小程序的ios环境能够正常触发tap事件，但是到了安卓没有任何反应，也没报错。

排查过程

(z-index) 首先可能是元素层级导致

很多因为这个的原因但是我遇到的不是。当时代码中元素层级很复杂，排查层级这一步废了很多时间。

事件传递原因

我的组件最外层盒子有注册@touchstart @touchmove @touchend ，有让我在内层tap加 stop 阻止事件传递。试了没效果

解决

结论就是因为使用了3d盒子，然后安卓和ios机制不一样，ios可以触发安卓无法触发。

关键，将这行代码加到点击无法生效样式上。问题得以解决：
transform: translateZ(1px);

css真是高深，玩不明白。

伪代码

<view class="card-swiper">
	<view class="card-swiper-item">
		<view class="card">
			<view class="card-box-base-sty">
				// fun1有效 ， fun2无效 （当时排查头发扣完都没想明白！）
				<view @tap="fun1(item)" class="image-card-btn share-btn">按钮2</view>
				<view @tap="fun2(item)" class="image-card-btn share-btn">按钮2</view>
			</view>
			<view class=" card-box-base-sty card-box-back">
			 ....省略
			</view>
		</view>
	</view>
</view>




// style
	.card {
		position: relative;
		width: 70%;
		height: auto;
		transform-style: preserve-3d;
		/* 给卡片添加默认动画 */
		animation: 1s cubic-bezier(0.66, -0.47, 0.33, 1.5) forwards;
		animation-name: rotate-reverse;
	}

	.card-swiper {
		position: relative;
		z-index: 2;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		transition: transform 0.5s ease;
		/* 保证删除时的平滑重排 */
		will-change: transform;
		backface-visibility: hidden;
	}
	.card-swiper-item {
		flex: none;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		perspective: 1000px;
	}
	// 卡片正面
	.card-box-base-sty {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		border-radius: var(--border-radius);
		padding: 0;
		transition: all 0.5s ease;
		border: 12rpx solid var(--color);
		box-sizing: border-box;
		 // backface-visibility: hidden; // 注意这行 - 罪魁祸首！
	}
	// 卡片背面
	.card-box-back {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform: rotateY(180deg);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 5;
		backface-visibility: hidden;  // 卡片正面注释的放这。
	}

	.image-card-btn{
		transform: translateZ(1px); // 关键生效代码 将z轴层级提高
	}