为什么css` rotateY`属性不适用于safari

Question

下面是我的html和css代码。这很简单。我想在红色反应上显示正方形x ^ y。

＆＃13;

＆＃13;

\F1FC

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

此代码在chrome上运行良好，但不适用于safari。广场的一半被<div class="parent"> <p></p> </div>隐藏。下面是safari的屏幕截图：

以下是chrome的屏幕截图：

Answer 1

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

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

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;