Question

我有这个加载器，在所有东西中渲染都很好，但Safari：

.pageLoader {
  min-height: 100vh;
  min-width: 100vw;
  background-color: white;
  z-index: 2;
  position: fixed;
  opacity: .9;
  top: 0;
  left: 0;
  transition: opacity .6s linear;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pageSpinner {
   border-radius: 5%;
   width: 80px;
   height: 80px;
   background-color: #f50;
   animation: a 1.5s infinite cubic-bezier(.4,0,.2,1);
}
@keyframes a {
  0% { transform: perspective(300px) rotateX(0deg) rotateY(0deg); }
  50% { transform: perspective(300px) rotateX(-180deg) rotateY(0deg); }
  100% { transform: perspective(300px) rotateX(-180deg) rotateY(-180deg); }
}

<div class="pageLoader">
  <div class="pageSpinner"></div>
</div>

此处有完全前缀的版本：

.pageLoader {
  min-height: 100vh;
  min-width: 100vw;
  background-color: white;
  z-index: 2;
  position: fixed;
  opacity: .9;
  top: 0;
  left: 0;
  -webkit-transition: opacity .6s linear;
  -o-transition: opacity .6s linear;
  -moz-transition: opacity .6s linear;
  transition: opacity .6s linear;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.pageSpinner {
   -webkit-border-radius: 5%;
      -moz-border-radius: 5%;
           border-radius: 5%;
   width: 80px;
   height: 80px;
   background-color: #f50;
   -webkit-animation: a 1.5s infinite cubic-bezier(.4,0,.2,1);
      -moz-animation: a 1.5s infinite cubic-bezier(.4,0,.2,1);
        -o-animation: a 1.5s infinite cubic-bezier(.4,0,.2,1);
           animation: a 1.5s infinite cubic-bezier(.4,0,.2,1);
}
@-webkit-keyframes a {
  0% { -webkit-transform: perspective(300px) rotateX(0deg) rotateY(0deg); transform: perspective(300px) rotateX(0deg) rotateY(0deg); }
  50% { -webkit-transform: perspective(300px) rotateX(-180deg) rotateY(0deg); transform: perspective(300px) rotateX(-180deg) rotateY(0deg); }
  100% { -webkit-transform: perspective(300px) rotateX(-180deg) rotateY(-180deg); transform: perspective(300px) rotateX(-180deg) rotateY(-180deg); }
}
@-moz-keyframes a {
  0% { -moz-transform: perspective(300px) rotateX(0deg) rotateY(0deg); transform: perspective(300px) rotateX(0deg) rotateY(0deg); }
  50% { -moz-transform: perspective(300px) rotateX(-180deg) rotateY(0deg); transform: perspective(300px) rotateX(-180deg) rotateY(0deg); }
  100% { -moz-transform: perspective(300px) rotateX(-180deg) rotateY(-180deg); transform: perspective(300px) rotateX(-180deg) rotateY(-180deg); }
}
@-o-keyframes a {
  0% { transform: perspective(300px) rotateX(0deg) rotateY(0deg); }
  50% { transform: perspective(300px) rotateX(-180deg) rotateY(0deg); }
  100% { transform: perspective(300px) rotateX(-180deg) rotateY(-180deg); }
}
@keyframes a {
  0% { -webkit-transform: perspective(300px) rotateX(0deg) rotateY(0deg); -moz-transform: perspective(300px) rotateX(0deg) rotateY(0deg); transform: perspective(300px) rotateX(0deg) rotateY(0deg); }
  50% { -webkit-transform: perspective(300px) rotateX(-180deg) rotateY(0deg); -moz-transform: perspective(300px) rotateX(-180deg) rotateY(0deg); transform: perspective(300px) rotateX(-180deg) rotateY(0deg); }
  100% { -webkit-transform: perspective(300px) rotateX(-180deg) rotateY(-180deg); -moz-transform: perspective(300px) rotateX(-180deg) rotateY(-180deg); transform: perspective(300px) rotateX(-180deg) rotateY(-180deg); }
}

<div class="pageLoader">
  <div class="pageSpinner"></div>
</div>

Safari出于某种原因拒绝呈现转换“中心”背后的透视部分。我尝试过：

backface-visibility: hidden|visible|initial;
transform-style: preserve-3d;并将translateZ(1000)添加到transform s
perspective-origin-z:（父母与子女的各种价值观）。
z-index（父亲和孩子在孩子身上都有position:relative的各种值。）

请注意我已找到解决方案：我将.pageSpinner以外的第二个孩子放入父母，并将background-color从父母移至该孩子。并且它有效：.pageSpinner在正确z-index之后呈现在其兄弟之上。但是，

我不明白为什么父母的背景，当不透明时，夹住孩子。不管背景如何，背景都不应该落在孩子们的下方？我目前对堆叠上下文的理解是每个定位的父项都是其所有子项的堆叠上下文。父母的背景应该低于这种叠加背景。

有人可以解释Safari在这方面的不同之处吗？是否与父母position:fixed有关？如果它具有任何重要性，则父项是其原始上下文中body元素的直接子项。

另一个注意事项：一些属性可能与手头的问题无关，例如父级的opacity及其转换，但由于它们也存在于原始代码中（并且在生产中需要），我想我应该把它们留在这里，以防它们以某种方式对这个bug产生影响。

无论z-index如何，在Safari中由父母背景剪辑的已转换儿童。为什么？

0 个答案: