Chrome和Safari上的高度和边距呈现方式不同

Question

在制作网页时，我发现Chrome和safari存在以下差异。

铬

的Safari

白卡和手机的高度和宽度存在细微差别，并且在设置github按钮的边距时也存在显着差异。

我到处都使用％作为单位。任何人都可以指出为什么会这样吗？提前谢谢。

HTML：

<div class="layer container-3" data-depth="0.8">
                <div class="card">
                    <img src="images/phone.png" class="phone-img">
                    <img src="images/checkOnGithub.svg" class="github-button">
                </div>
</div>

.layer和data-depth属性来自parallax.js插件。我还使用了fullPage.js插件 - 以防万一。

CSS：

.container-4 {
    position: relative;
    z-index: 20;
    top: 9% !important;
    left: 0 !important;
    width: 100vw;
    height: 100vh;
}

.phone-img {
    position: relative;
    z-index: 50;
    height: 150%;
    width: auto;
    top: -18%;
    left: -46%;
}

.card {
    background-color: #ffffff;
    height: 58%;
    position: relative;
    z-index: 50;
    width: 45%;
    top: 22.5%;
    left: 35%;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.5);
}

.github-button {
    margin-top: 52%;
    right: 18%;
    cursor: pointer;
    height: 18%;
    width: auto;
    position: absolute;
    z-index: 50;
    margin-right: 15%;
}