Question

在Safari上，我一直在努力解决以下问题。我有一个parent div，其中有一个类为morph的svg元素，另一个名为card-container的div，我试图将SVG元素放在card-container div的后面，我通过在parent div relative位置和svg元素absolute位置，在Chrome和Firefox中成功地做到了这一点。但是，它似乎无法正常运行，只是在Safari中不起作用。 SVG元素似乎也覆盖了card-container div，尽管也赋予了z-index。

在Safari中的外观： 和在Chrome中：请注意，带有JSON代码的card-container不是svg，而是实际的div。

我的HTML：

<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              </pre>
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我的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)
}

SVG在Safari中的绝对定位不起作用

0 个答案: