Safari 中的 CSS 透视图/translateZ 问题答案

【问题标题】：Issue with CSS perspective / translateZ in SafariSafari 中的 CSS 透视图/translateZ 问题
【发布时间】：2020-03-01 20:16:27
【问题描述】：

第一次使用透视图和 translateZ，我遇到了 Safari 的一些问题。

我正在使用代码为我正在构建的网站创建一个简单的视差效果，该效果在 firefox 和 chrome 中可以正常工作，但在 safari 中却不能。 Safari 似乎正在向应用透视属性的容器底部添加填充，这在其他提到的浏览器上不会发生。

我查看了 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>

【问题讨论】：

你试过用-webkit-transform前缀吗？
@NickBerens 是的，但无济于事！视差本身在 safari 中工作，有无 webkit 前缀，但填充仍然存在！

标签： html css safari css-transforms webkit-perspective

【解决方案1】：

在拉了很多自己的头发之后，我已经解决了这个问题，我只需要将变换和透视原点设置为右下角！

Google 的 Paul Lewis 提供的这份指南非常有帮助！

https://developers.google.com/web/updates/2016/12/performant-parallaxing

【讨论】：