在 Firefox 上，溢出：隐藏有效，但滚动条和空格仍然存在

Question

我知道 Firefox 与溢出有点不一致：隐藏；我读了相关的故事。所以在溢出之上：隐藏；属性，我还添加了剪辑路径：插入（0 0 0 0）；甚至 -moz-overflow: hidden;.结果，溢出确实被隐藏了，但是在溢出的地方仍然存在很大的空白。如何摆脱这种情况？

这是我的 CSS：

    .site-footer {
        position: relative;
        display: table;
        -moz-overflow: hidden;
        overflow: hidden;
        clip-path: inset(0 0 0 0);
        background-color: #10142F;
        width: 100%;
        padding-top: 30px;
    }

    .site-footer::before{
        content: "";
        width: 350%;
        max-width: 350%;
        display: table-cell;
        height: 120%;
        left: -125%;
        top: -10%;
        position: absolute;
        z-index: 0;
        background-image: url('media/backgrounds/blue-planet-4-1700-2.jpg');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        -webkit-animation: spin 160s linear reverse infinite;
        animation: spin 160s linear reverse infinite;
    }

有问题的元素是旋转的背景伪元素，它比父元素大（故意），但我应该可以用 css 将其切断。

这是网站： www.satya-ame-art.com

此问题出现在本网站页脚的最后。在 Chrome 和 Safari 上，它运行良好...

非常感谢！！

Answer 1

给溢出：隐藏到页面元素

#page {
  overflow: hidden;
}