为什么 css `rotateY` 属性 在 safari 上不起作用

Question

下面是我的 html 和 css 代码。这很简单。我想在红色反应上显示一个正方形 \F1FC。

.parent::before {
  position: absolute;
  content: '';
  width: 40px;
  height: 40px;
  background-color: red;
  border-radius: 10px 0px 0px 10px;
  transform: perspective(5px) rotateY(-2deg);
  z-index: -1;
}

p::before {
  content: "\F1FC";
  color: black;
  margin-left: 15px;
}

<div class="parent">
  <p></p>
</div>

此代码在 chrome 上运行良好，但在 Safari 上不起作用。 p::before 隐藏了一半的正方形。以下是 safari 的屏幕截图：

下面是chrome的截图：

Answer 1

这是 Safari 和伪元素中的某种奇怪错误。我对这个问题的解决方案是反击父伪元素上的 transform: rotateY(-2deg);，因为它导致了这个问题。

将 display: block; 和 transform: rotateY(1deg); 添加到 p::before。小旋转似乎不会影响正方形的外观，它在 Safari 中为我修复了它。

.parent::before {
  position: absolute;
  content: '';
  width: 40px;
  height: 40px;
  background-color: red;
  border-radius: 10px 0px 0px 10px;
  transform: perspective(5px) rotateY(-2deg);
  z-index: -1;
}

p::before {
  content: "\F1FC";
  color: black;
  display: block;
  margin-left: 15px;
  transform: rotateY(1deg);
}

<div class="parent">
  <p></p>
</div>