使用透视图时，如何使基于Blink的浏览器让我滚动浏览整个内容？

如何解决使用透视图时，如何使基于Blink的浏览器让我滚动浏览整个内容？

我正在尝试实现视差滚动效果，尽管它在Safari和Firefox上运行良好，但是基于Blink的浏览器（例如Chrome，Edge和Opera）却一直给我带来麻烦，但我一直无法让他们工作。问题是内容由于某种原因而被裁剪。仅出于测试目的，这是我现在基本上拥有的：

<div class="outer-wrapper>
    <main>
        <article>...</article>
        <article>...</article>
        <article>...</article>
    </main>
</div>

样式如下：

.outer-wrapper {
    height: 100vh;
    perspective: 1px;
    perspective-origin: 0 0;
    overflow-x: hidden;
}

main {
    transform: translateZ(-1px) scale(2);
    transform-origin: 0 0;
    overflow: hidden;
}

article {
    position: relative;
    height: 100vh;
}

每个article元素的高度均为100vh，正确计算出main的高度为300vh，但其容器无法完整显示。例如，使用上面的代码，我只能看到前两篇文章，并且在上述浏览器上不可能滚动到这之外。换句话说，基于Chrome的浏览器只会显示三分之二的主屏幕（即200vh），而过去几天我一直没有尝试解决该问题。顺便说一句，我还尝试将透视图设置为原点，并将其原点设置在右下角（这消除了Safari和Firefox上的一些空白），但是基于Chrome的浏览器将继续出现相同的问题。

有人知道为什么会发生这种情况以及如何解决吗？我觉得我已经没有足够的东西来尝试了。

解决方法

我在Edge10，Chrome10，Firefox，Windows10上的IE11和iPadIOS13上的Safari上尝试了给定的代码，并遇到了问题（除了Firefox和Safari以外的所有内容）中滚动到第三条的问题。

在同一元素上设置透视图和溢出似乎有些冲突。从.outer-wrapper中删除overflow-x: hidden;，可以在所有这些浏览器上滚动到第三篇。

overflow: hidden紧随其后被设置为主要，我想（但不知道）此删除操作不会破坏非测试版本中的其他内容。

将overflow-x放入.article也不会造成问题。

我一直在寻找类似的问题，过去似乎在透视图和其他各种设置方面都存在一些问题，但是我找不到描述这种特殊现象的任何方法。

它看起来像一个浏览器错误，因为很难理解为什么溢出会与透视图一起产生这种影响。