Safari中的水平视差渲染错误

Question

我最近建立了一个使用水平视差滑块的站点。但是，尽管代码可以在所有浏览器上正常运行，但不幸的是，台式机和移动设备上的Safari浏览器都无法正确呈现它。我很确定这是由于在CSS中使用了scale（）。我没有办法自己解决问题。希望有人可以提供帮助：）

我的HTML：

<div class="parallax">

    <div class="parallax-layer parallax-layer-1">
        <div class="background"></div>
    </div>

    <div class="parallax-layer parallax-layer-2">
        <div class="background"></div>
    </div>

    <div class="parallax-layer parallax-layer-3">
        <div class="background" id="projekte">
            <ul>
                <li><a href="https://goldnode.de/k2l/testprojekt-3/#content"><img width="535" height="800" src="https://goldnode.de/k2l/wp-content/uploads/2018/06/kks.png" /></a></li>
                <li><a href="https://goldnode.de/k2l/testprojekt-2/#content"><img width="1220" height="800" src="https://goldnode.de/k2l/wp-content/uploads/2018/06/dew.png"/></a></li>
                <li><a href="https://goldnode.de/k2l/testprojekt/#content"><img width="535" height="800" src="https://goldnode.de/k2l/wp-content/uploads/2018/06/kks.png" /></a></li>
            </ul>
        </div>
    </div>

</div>

还有我的CSS：

.parallax {
    background: url('https://goldnode.de/k2l/wp-content/uploads/2018/06/bg.png') repeat;
    height: 85%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-perspective: 1px;
    perspective: 1px;
}

.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.parallax-layer-1 {
    transform: translateZ(-2px) scale(3);
    -webkit-transform: translateZ(-2px) scale(3);
    width: 2296px;
}

.parallax-layer-2 {
    transform: translateZ(-1px) scale(2);
    -webkit-transform: translateZ(-1px) scale(2);
    width: 2296px;
}

.parallax-layer-3 {
    transform: translateZ(0px);
    -webkit-transform: translateZ(0px);
    width: 2296px;
}

.background {
    position: absolute;
    display: block;
}

.parallax-layer-1 .background {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: repeat-x;
    background-position: center bottom;
    background-image: url('https://goldnode.de/k2l/wp-content/uploads/2018/06/landschaft.png');
}

.parallax-layer-2 .background {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: repeat-x;
    background-position: center bottom;
    background-image: url('https://goldnode.de/k2l/wp-content/uploads/2018/06/stadt.png');
}

.parallax-layer-3 .background {
    bottom: 0;
    left: 0;
    float: left;
}

.parallax-layer-3 .background ul {
    list-style-type: none;
}

.parallax-layer-3 .background ul > li {
    display: inline;
}

非常感谢。