Pseudo class before with background colour not working in safari

Please refer to codepen here https://codepen.io/deepeshk12apr/pen/gOezENr

HTML

<div id='test'>
  <p>Test </p>
</div>

CSS

#test {
  position: relative;
  perspective: 240px;
  width: 500px;  
}

#test p {
    position: relative;
}

#test::before {
    content: '';
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: 0;
    right: 0;
    line-height: 27px;
    border: 1px solid #D4E7D1;
    background: #E4F7E1;
    border-radius: 5px 5px 0 0;
    transform: rotateX(45deg); 
}

[render correctly in chrome][1] [1]: https://i.stack.imgur.com/iEfy0.png [render in-correctly in safari][2] [2]: https://i.stack.imgur.com/rFsBP.png

CodePudding user response：

The problem seems to be that Safari is taking the rotation as being in 3d.

As the default origin for such transforms is along the central x axis half the background is towards the viewer and obscures the bottom of the text.

I don't know why the 2d/3d treatment differs in the two browsers.

A workaround may be to have the pseudo element rotate around the bottom (but with a reduced angle).

#test {
  position: relative;
  perspective: 240px;
  width: 500px;
}

#test p {
  position: relative;
}

#test::before {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -5px;
  left: -10px;
  right: 0;
  line-height: 27px;
  border: 1px solid #D4E7D1;
  background: #E4F7E1;
  border-radius: 5px 5px 0 0;
  transform: rotateX(22deg);
  transform-origin: center bottom;
}

<div id='test'>
  <p>Test </p>
</div>

You'll obviously want to play around with the exact positioning and angle to get exactly what you want in terms of slope.