html - 在 Firefox 上，溢出 : hidden works, 但滚动条和空格仍然存在

Question

我知道 Firefox 与 overflow: hidden; 有点不一致；我读了相关的故事。所以在溢出之上:隐藏；属性，我还添加了 clip-path: inset(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

给overflow: hidden给页面元素

#page {
  overflow: hidden;
}