第一次使用Perspective和translateZ，我在Safari中遇到了一个问题。
我正在使用代码为正在构建的网站创建简单的视差效果，该网站在Firefox和chrome浏览器中可以正常工作，但在Safari浏览器中却无法正常工作。 Safari似乎在将容器的底部添加了Perspective属性的填充，这在其他提到的浏览器中不会发生。
我查看了safari的调试工具，以查看是否在不应添加的任何位置添加了填充或边距，但事实并非如此。我将在下面附上我的代码以进行演示，以及一些有关期望和不希望有的行为的图像。
提前加油。
期望的行为：
不良行为：
@import url('https://fonts.googleapis.com/css?family=Staatliches&display=swap');
body,html {
margin: 0;
padding: 0;
font-family: 'Staatliches',cursive;
-webkit-margin-end: none;
-webkit-padding-end: none;
}
.parallax {
position: fixed !important;
perspective: 1px !important;
width: 100%;
top: 0;
bottom: 0;
overflow-x: hidden !important;
overflow-y: scroll !important;
}
.object-wrapper {
display: block !important;
height: 100vh !important;
width: 100vw !important;
background: none !important;
}
.mix-blend {
// mix-blend-mode:screen;
}
.speed-1 {
-webkit-backface-visibility: hidden;
transform: translateZ(-1px) scale(2);
}
.speed-2 {
-webkit-backface-visibility: hidden;
transform: translateZ(-2px) scale(3);
}
.speed-3 {
-webkit-backface-visibility: hidden;
transform: translateZ(-3px) scale(4);
}
.speed-4 {
-webkit-backface-visibility: hidden;
transform: translateZ(-4px) scale(5);
}
.speed-5 {
-webkit-backface-visibility: hidden;
transform: translateZ(-5px) scale(6);
}
.speed-6 {
-webkit-backface-visibility: hidden;
transform: translateZ(-6px) scale(7);
}
.object {
line-height: 100vh;
font-size: 33.33vw;
text-align: center;
color: black;
}
.object-1 {
position: relative;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: white;
}
.object-2 {
position: relative;
top: 0vh;
left: 0;
height: 200vh;
width: 33.33vw;
background: white;
}
.object-3 {
position: relative;
top: -24vh;
left: 33.33vw;
height: 101vh;
width: 33.33vw;
background: white;
}
.object-4 {
position: relative;
top: -66.66vh;
left: 66.66vw;
height: 133.33vh;
width: 33.33vw;
background: white;
}
.object-5 {
position: relative;
top: 0vh;
left: 0;
height: 100vh;
width: 100vw;
background: red;
}
.video {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
object-fit: cover;
}<div class="parallax">
<div class="object-wrapper mix-blend speed-1">
<div class="object object-2">
<div class="hero-text">W</div>
</div>
</div>
<div class="object-wrapper mix-blend speed-3">
<div class="object object-3">
<div class="hero-text">C</div>
</div>
</div>
<div class="object-wrapper mix-blend speed-2">
<div class="object object-4">
<div class="hero-text">M</div>
</div>
</div>
<div class="object-wrapper speed-1">
<div class="object object-5">
<div class="hero-text">M</div>
</div>
</div>
</div>