Javascript Transform TranslateZ不在Mac safari 11上工作

我正在实现纯CSS视差。它在Chrome上工作，但不在Chrome上工作 Firefox和MacSafari-11。请查找下面的示例

我正在试这个（）。本示例的大部分内容都在safari中工作。但是，当我试图实现两个使用旋转属性的小图像的视差效果时，它在chrome中工作得很好，但在MacSafari 11上视差效果不起作用

我曾尝试将webkit用于safari：-

    -webkit-transform-style: preserve-3d;
     -webkit-perspective: 1000px;

并尝试：-

backface-visibility: visible;

幻灯片2
同侧阴唇，侧阴唇，侧阴唇，侧阴唇，侧阴唇，侧阴唇，侧阴唇。马利的动作或状态会影响视觉，但他会贬低ea，而厄鲁迪蒂则会参与其中。我不明白。劳动永远伴随着时间。我是丹尼克·维姆

幻灯片3
同侧阴唇，侧阴唇，侧阴唇，侧阴唇，侧阴唇，侧阴唇，侧阴唇。马利的动作或状态会影响视觉，但他会贬低ea，而厄鲁迪蒂则会参与其中。我不明白。劳动永远伴随着时间。我是丹尼克·维姆

html{
身高：100%；
溢出：隐藏；
}
正文{
保证金：0；
填充：0；
透视图：1px；
变换样式：保留-3d；
身高：100%；
溢出y：滚动；
溢出x：隐藏；
字体系列：Nunito；
}
h1{
字号：250%
}
p{
字体大小：140%；
线高：150%；
颜色：#333；
}
.幻灯片{
位置：相对位置；
填充：25vh 10%；
最小高度：100vh；
宽度：100vw；
框大小：边框框；
盒影：0-1px10px rgba（0,0,0,7）；
转换样式：继承；
}
img{
位置：绝对位置；
最高：50%；
左：35%；
宽度：320px；
高度：240px；
变换：translateZ（.25px）比例（.75）translateX（-94%）translateY（-100%）旋转（2deg）；
填充：10px；
边界半径：5px；
背景：rgba（240230220，.7）；
盒影：0.08像素rgba（0,0,0,7）；
}
img：类型的最后一个{
变换：translateZ（.4px）比例（.6）translateX（-104%）translateY（-40%）旋转（-5度）；
}
幻灯片：之前{
内容：“；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
盒影：0.08px 1px rgba（0,0,0,7）；
}
.头衔{
宽度：50%；
填充：5%；
边界半径：5px；
背景：rgba（240230220，.7）；
盒影：0.08像素rgba（0,0,0,7）；
}
.幻灯片：第n个孩子（2n）.标题{
左边距：0；
右边距：自动；
}
幻灯片：第n个子项（2n+1）。标题{
左边距：自动；
右边距：0；
}
.幻灯片，.幻灯片：在{
背景：50%50%/封面；
}
.标题{
文本对齐：居中；
字号：175%；
颜色：#fff；
文本阴影：0 2px 2px#000；
}
#头衔{
背景图像：url（“https://lorempixel.com/640/480/abstract/6/");
z指数：2；
}
#标题h1{
变换：translateZ（.25px）比例（.75）；
变换原点：50%100%；
}
#幻灯片1：之前{
背景图像：url（“https://lorempixel.com/640/480/abstract/4/");
变换：translateZ（-1px）标度（2）；
}
#幻灯片2{
背景图像：url（“https://lorempixel.com/640/480/abstract/3/");
z指数：2；
}
#幻灯片3：之前{
背景图像：url（“https://lorempixel.com/640/480/abstract/5/");
}

---

有人请帮忙吗？

到目前为止你都试过什么？还有，你说的“停止工作”是什么意思？如果你能更具体一点，社区可能会更快地帮助你。

<div id="slide2" class="slide">
  <div class="title">
    <h1>Slide 2</h1>
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
  </div>
  <img src="https://lorempixel.com/640/480/abstract/6/">
  <img src="https://lorempixel.com/640/480/abstract/4/"> 
</div>

<div id="slide3" class="slide">
  <div class="title">
    <h1>Slide 3</h1>
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
  </div>
</div>

<style>
html {
  height: 100%;
  overflow: hidden;
}
body { 
  margin:0;
  padding:0;
    perspective: 1px;
    transform-style: preserve-3d;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: Nunito;
}
h1 {
   font-size: 250%
}
p {
  font-size: 140%;
  line-height: 150%;
  color: #333;
}
.slide {
  position: relative;
  padding: 25vh 10%;
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
    transform-style: inherit;
}
img {
  position: absolute;
  top: 50%;
  left: 35%;
  width: 320px;
  height: 240px;
  transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
  padding: 10px;
  border-radius: 5px;
  background: rgba(240,230,220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
img:last-of-type {
  transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
.slide:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, .7);
}
.title {
  width: 50%;
  padding: 5%;
  border-radius: 5px;
  background: rgba(240,230,220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
  margin-left: 0;
  margin-right: auto;
}
.slide:nth-child(2n+1) .title {
  margin-left: auto;
  margin-right: 0;
}

.slide, .slide:before {
  background: 50% 50% / cover;  
}
.header {
  text-align: center;
  font-size: 175%;
  color: #fff;
  text-shadow: 0 2px 2px #000;
}
#title {
  background-image: url("https://lorempixel.com/640/480/abstract/6/");
  z-index:2;
}

#title h1 {
 transform: translateZ(.25px) scale(.75);
 transform-origin: 50% 100%;

}
#slide1:before {
  background-image: url("https://lorempixel.com/640/480/abstract/4/");
  transform: translateZ(-1px) scale(2);
}
#slide2 {
  background-image: url("https://lorempixel.com/640/480/abstract/3/");
  z-index:2;
}
#slide3:before {
  background-image: url("https://lorempixel.com/640/480/abstract/5/");

}
</style>