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

Question

我知道Firefox与溢出有点不一致：隐藏；我读了相关的故事。因此，在溢出之上：隐藏；属性，我也添加了剪切路径：inset（0 0 0 0）;甚至-moz-overflow：隐藏;。结果，溢出确实被隐藏了，但是仍然有很大的空白空间。如何摆脱这个？

这是我的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;
}