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>