I have some css in which I style an ::after element with transforms to make it look like an arrow. The arrow should have a different rotation when the element is collapsed, which is indicated by the .collapsed class on its parent.

The code works fine in firefox and chrome, but safari applies no transformations. I manually added the -webkit prefix and later passed my files through the postcss autoprefixer but the problem remains. I am using gatsby with css modules, but I think this should not be relevant. Is there anything obvious I am missing. The code is given below. Thank you.

 .questionHeader::after {
    content: ">";
    display: inline;
    margin-left: auto;
    width: auto;

    font-size: 2.5rem;
    font-family: 'helvetica-bold';
    color: var(--accent-color-two);
    
    -webkit-transition: transform var(--animation-duration);
    transition: transform var(--animation-duration);

    -webkit-transform: rotate(-90deg) scaleX(.9, 1.5);
    transform: rotate(-90deg) scaleX(90%) scaleY(150%);
  }

  .collapsed > .questionHeader::after {
    -webkit-transform: rotate(90deg) scaleX(.9, 1.5);
    transform: rotate(90deg) scaleX(90%) scaleY(150%);
  }