如何用仅css视差实现隐藏溢出？

Question

有很多关于CSS-only parallax的资源，但没有一个能解决我特定的问题（或者我发现的）。基本上，我希望慢滚动元素仅在其正常滚动父项中可见。在下面的示例中，当页面滚动时，正常滚动的白色边框应该干净地分隔较慢的滚动图像，但它仅适用于Chrome（版本52）。我在（FF和Safari）中测试过的其他浏览器不起作用：

ul {
    display: block;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
     -webkit-perspective: 1px;
     -moz-perspective: 1px;
     perspective: 1px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
li {
    display: block;
    position: relative;
    height: 100vh;
    overflow: hidden;
    -webkit-transform-style: inherit;
    -moz-transform-style: inherit;
    transform-style: inherit;
}

li:after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    height: 25px;
    left: 0;
    right: 0;
    background-color: white;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
}

li div {
    position: absolute;
    top: 25px;
    bottom: 25px;
    left: 0;
    right: 0;
    background-color: #fff;
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-transform: translateZ(-1px) scale(2);
    -moz-transform: translateZ(-1px) scale(2);
    transform: translateZ(-1px) scale(2);
}

<ul>
    <li>
        <div style="background-image: url(http://www.texturequalitypro.com/assets/files/content_files/TextureQualityPro_Large_Sample.jpg);"></div>
    </li>
    <li>
        <div style="background-image: url(http://orig07.deviantart.net/fba3/f/2012/272/1/8/nikon_d600_image_sample_image__1__jpeg_large__by_mozlin-d5g7vbg.jpg);"></div>
    </li>
    <li>
        <div style="background-image: url(http://archivision.com/educational/samples/files/1A2-F-P-I-2-C1_L.jpg);"></div>
    </li>
</ul>

据我所知，在示例中，转换属性设置不正确 - 容器UL同时设置了perspective和transform-style属性（它应该只有perspective），并且LI元素将transform-style设置为inherit而不是preserve-3d - 但这是我能够实现所需结果的唯一方式，并且只能在Chrome中使用。

（样本中的图片不是我的，我只是通过谷歌搜索找到它们）

关于CSS变换属性，这是一个“正确”的例子，但图像相互重叠：

ul {
    display: block;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
     -webkit-perspective: 1px;
     -moz-perspective: 1px;
     perspective: 1px;
}
li {
    display: block;
    position: relative;
    height: 100vh;
    /*overflow: hidden;*/
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

li:after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    height: 25px;
    left: 0;
    right: 0;
    background-color: white;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
}

li div {
    position: absolute;
    top: 25px;
    bottom: 25px;
    left: 0;
    right: 0;
    background-color: #fff;
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-transform: translateZ(-1px) scale(2);
    -moz-transform: translateZ(-1px) scale(2);
    transform: translateZ(-1px) scale(2);
}

<ul>
    <li>
        <div style="background-image: url(http://www.texturequalitypro.com/assets/files/content_files/TextureQualityPro_Large_Sample.jpg);"></div>
    </li>
    <li>
        <div style="background-image: url(http://orig07.deviantart.net/fba3/f/2012/272/1/8/nikon_d600_image_sample_image__1__jpeg_large__by_mozlin-d5g7vbg.jpg);"></div>
    </li>
    <li>
        <div style="background-image: url(http://archivision.com/educational/samples/files/1A2-F-P-I-2-C1_L.jpg);"></div>
    </li>
</ul>

取消注释LI元素上的overflow: hidden属性，你可能认为它会得到我想要的效果，打破了视差。