Why doesn't the css `rotateY` property work on safari - html

Question

Below is my html and css code. It is pretty simple. I want to show a square \F1FC on a red react.
.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>
This code works fine on chrome but doesn't work on safari. Half of the square is hidden by the p::before. Below is a screen shot on safari:
Below is the screenshot for chrome:

Answer 1

This is some kind of weird bug in Safari and pseudo elements. My solution for this issue was to counter the transform: rotateY(-2deg); on the parent pseudo element since it was causing the issue.
Add display: block; and transform: rotateY(1deg); to p::before. The small rotation doesn't seem to affect how the square looks and it fixes it for me in 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>