Css 使用透视图时，translate3d在Safari和Chrome/Firefox中的行为不一致

使用translate3d移动绝对定位的对象，同时使用透视修改translate3d视图时，Safari的功能与其他浏览器不同

如果对象没有绝对定位，则不会出现问题，Safari的功能与其他浏览器相同

编辑：我忘了提到Safari问题也适用于应用了translate3d的对象内的内容。链接或按钮等内部内容在其视觉表示位置不可单击，相反，它似乎位于视觉“应该”的位置。我在codepin中添加了一个按钮，并使用代码进行演示

jQuery（文档）.ready（函数（$）{
$（“.clickme”）。单击（函数（）{
$（“body”）.toggleClass（“toggle”）；
});
});
正文{
保证金：0；
}
.外箱{
透视图：900px；
}
.盒子{
填充：100px 15%；
背景：#000；
颜色：#fff；
位置：绝对位置；
左：0；
右：0；
排名：0；
高度：100vh；
溢出：滚动；
框大小：边框框；
文本对齐：居中；
}
.toggle.box{
转换：translate3d（0px，100px，-200px）；
}
.点击我{
光标：指针；
浮动：对；
位置：相对位置；
z指数：1；
背景：粉红色；
填充：20px；
}
钮扣{
光标：指针；
}

X
在奥古斯·劳里特·鲁图姆·福西布斯·多洛尔·奥克托的带领下，人马过着幸福的生活。请点击我！
这是一幅图像，您必须在Safari中单击以激活使用translate3d和perspective移动的对象中的按钮；