Абсолютное позиционирование SVG в Safari не работает

Question

Пару часов я боролся со следующей проблемой в Safari. У меня есть parent div, где есть элемент svg с классом morph и другой div с именем card-container, я пытаюсь расположить элемент SVG за card-container div, и я успешно сделал это в Chrome и Firefox, предоставив позиционирование parent div relative и указав элемент svg absolute. Кажется, что это работает, но только не в Safari. Элемент SVG, кажется, покрывает card-container div, несмотря на то, что он также дает z-index.

Как это выглядит в Safari: и в Chrome: Обратите внимание, что card-container с кодом JSON - это не svg, а фактический div.

Мой HTML:

<code><div class="wrapper">
    <div class="container product-container">
        <div class="flex-center-container-row product-animation-container">
            <svg class="morph" width="100%" height="100%" viewBox="25 0 1300 770" fill="#583CFF" preserveAspectRatio="none">
                <path d='M 262.9,252.2 C 210.1,338.2 212.6,487.6 288.8,553.9 372.2,626.5 511.2,517.8 620.3,536.3 750.6,558.4 860.3,723 987.3,686.5 1089,657.3 1168,534.7 1173,429.2 1178,313.7 1096,189.1 995.1,130.7 852.1,47.07 658.8,78.95 498.1,119.2 410.7,141.1 322.6,154.8 262.9,252.2 Z'/>
            </svg>

            <div class="card-container">
                <div class="card-overlay" style="opacity: 1;">
                    <div class="card-code" style="transform: translate3d(0px, -1380px, 0px);">
                      <div class="card-code">
                                                <pre>
  ...code you see in the picture              

Мой CSS:

/* base */
*{
    box-sizing: border-box;
}

body{
    font-family: 'Lato', sans-serif;
    overflow-y: scroll;
    overflow-x: scroll;
}

/* stripe's card code overide */
.aside-sticky, .card-scene { position: relative }

/* wrapper and containers */
.wrapper,
.container,
.flex-center-container-column,
.flex-center-container-row{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.container{
    padding: 50px 0;
    width: 90%;
}

/* products header div */
.product-animation-container{
    min-height: 40vh;
    width: 100vw;
    position: relative;
    overflow: visible;
}

.morph{
    position: absolute;
    max-width: 400px;
    max-height: 250px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    z-index: 1;
    overflow: hidden;
}

.card-container{
    height: 200px;
    width: 100vw;
    -webkit-transform: rotateX(0.0827848rad) rotateY(-0.598887rad);
    transform: rotateX(0.0827848rad) rotateY(-0.598887rad);
    font-family: 'Ubuntu', sans-serif !important;
    z-index: 2;
}

.card-code{
    font-family: 'Ubuntu', sans-serif;
    text-align: left;
    transform: translate3d(0px, 0px, 0px)
}