CSS：Safari 上的堆叠顺序问题

Question

我正在尝试使用 CSS 创建形状，使用前后伪元素。该形状在 Chrome 和 Firefox 中的呈现方式与我预期的一样，但是在 Safari 中，:before 内容最终堆叠在 :after 内容之上，我不确定为什么。看起来它与我的 :before 元素中的转换有关，但我不确定我到底做错了什么，以及为什么它只是在 Safari 中有所不同，而且我不知道如何修复它。

This is what I get on Chrome/Firefox and this is what I get in Safari

.outer {
  position: absolute;
  top: 50px;
  left: 100px;
  transform: rotate(27deg);
}

.shape {
  position: absolute;
 height: 100px;
 width: 100px;
 background-color: blue;
 border-radius: 50%;
}
.shape:before {
  content: '';
  position: absolute;
  left: 36px;
  top: 26px;
  width: 200px;
  height: 48px;
  background-color: inherit;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  transform: perspective(200px) rotateY(70deg);
}
.shape:after {
  content: '';
  position: absolute;
  top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(blue 17%, transparent 19%),
    radial-gradient(red 26%, transparent 28%),
    radial-gradient(blue 40%, transparent 42%),
    red;
}

<div class="outer">
  <div class="shape"></div>
</div>

Answer 1

不确定到底是什么问题（而且我无法测试）但是您可以调整 :before 形状以考虑径向渐变以创建透明部分并避免重叠，即使元素在顶部。

这是一个示例，其中我明确地将 :before 放在顶部并且它有效。我也减少了一些代码。

.shape {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 100px;
  transform: rotate(27deg);
}

.shape:before {
  content: '';
  position: absolute;
  left: 36px;
  top: 26px;
  width: 200px;
  height: 48px;
  background: radial-gradient(25px 23px at left,transparent 98%, blue 100%);
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  transform: perspective(200px) rotateY(70deg);
  z-index:1;
}

.shape:after {
  content: '';
  position: absolute;
  top: 0;
  left:0;
  right:0;
  bottom:0;
  border-radius: 50%;
  border:4px solid blue;
  background: 
   radial-gradient(blue 17%, transparent 19%), 
   radial-gradient(red  26%, transparent 28%), 
   radial-gradient(blue 40%, transparent 42%), 
   red;
}

<div class="shape"></div>

CSS：Safari 上的堆叠顺序问题

CSS: Stacking Order Issue on Safari

css

safari

z-index