CSS transform issues on Safari

Question

I am currently working on my portfolio made with VueJS, SCSS and pure CSS. I am facing somes issues with a couple of elements and animations that I made.

There is no problems on Firefox and Chrome but it totally goes wrong on Safari when I use transform rotate property.

See my website : https://uniqode-agency.fr

Let's see an exemple with a 3D effect made with the code below :

.card-container {
      width: 500px;
      aspect-ratio: 5/3;
      margin-left: auto;
      margin-right: auto;
      border-radius: 20px;
      box-shadow: 0 10px 40px 2px rgba(0, 0, 0, 0.4);
      background: #000;
      transform-origin: center center 0px;
      transition: all 0.5s ease-out;
      transform: perspective(1000px) rotateX(35deg) rotateY(4deg)
        rotateZ(-30deg);
      z-index: 1;
      display: flex;

      @media (max-width: 1100px) {
        width: 100%;
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      }

      @media (min-width: 1101px) {
        &:hover {
          margin-top: 180px;
          transform: perspective(1000px) rotateX(0deg) rotateY(0deg)
            rotateZ(0deg);
        }
      }

      .card {
        margin: auto;
        height: min-content;

        a {
          color: inherit;
          text-decoration: none;
        }

        p:not(.name) {
          font-size: 1.8em;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          background: linear-gradient(
            to right,
            rgba(67, 123, 241, 1),
            rgba(238, 174, 215, 1) 50%,
            white 50%
          );
          background-clip: text;
          -webkit-text-fill-color: transparent;
          background-size: 200% 100%;
          background-position: 100%;
          transition: background-position 0.7s cubic-bezier(0.85, 0, 0.15, 1);
          margin: 5px 35px;

          @media (max-width: 800px) {
            font-size: 1.4em;
          }

          &:hover {
            background-position: 0 80%;
          }
        }

        p.name {
          font-size: 1.8em;
          color: white;
          margin-bottom: 35px;

          @media (max-width: 800px) {
            font-size: 1.4em;
          }
        }
      }
    }

<div class="card-container">
        <div class="card">
          <p class="name">Pierre <b>Mathelin</b></p>
          <a href="mailto:pierre@uniqode-agency.fr"
            ><p>pierre@uniqode-agency.fr</p></a
          >
          <a href="tel:+33756866684"><p>+33 7 56 86 66 84</p></a>
        </div>
      </div>

Result on chrome or firefox (🤩) :

Result on safari (😒) :

Do you have any idea on how to solve this ?

PS : I am working with VueJS and SASS preprocessor, so every -webkit-transform or something else are normally generated.

Answer 1

Adding position: relative; to the card container fixes the problem in my version of Safari (15.0). I don't know why it works differently from Chrome and Firefox, but it's probably because of the z-index. Screenshot on Safari