html - 将正文设置为边距 :0 causes CSS animation issue in Firefox

Question

一段时间以来，我一直在研究这个问题的变体。目前我的动画在所有浏览器中都能正常工作，但在 FF 中将 body margin 设置为 0 会破坏它，如下所示。

我必须针对所有其他浏览器，设置正文边距，然后让它在 FF 中显示。显然这并不理想，因为我希望布局统一。

请使用 firefox 重现问题。

这是工作 Jsfiddle

HTML

<header class="header">
<div class="header-container">
<div class="top-header-ani ani slide-t navbar">
<a href="index2.html">Home</a></div>

<div class="main-header-ani"><span class="mainheader">△</span></div>

<div class="bottom-header-ani ani slide-b">
<span class="maintitle">tetris<span class="yel">for</span>kicks</span>
<br>
<span class="subtitle">web development &amp; design</span></div>
</div>
</header>

CSS

header {
       margin-top: 50px;
   }



   .header-container {
       width: 100%;
       height: 200px;
       margin: 100px 0 0 0;
       position: absolute;
   }

   .main-header-ani {
       font-family: 'quicksand', helvetica;
       text-align: center;
       line-height: 200px;
       background-color: #a2aba2;
       width: 100%;
       height: 200px;
       position: relative;
   }

   .top-header-ani {
       width: 100%;
       height: auto;
       text-align: center;
       position: relative;
       z-index: -1;
   }

   .bottom-header-ani {
       width: 100%;
       height: auto;
       text-align: center;
       position: relative;
       z-index: -1;
   }
   /*................... index font stying ...................*/

   .yel {
       color: #eac961;
   }

   .navbar {
       text-transform: uppercase;
       font-family: helvetica;
       word-spacing: 10px;
   }

   .maintitle {
       color: #a2aba2;
       font-family: helvetica;
       font-size: 50pt;
   }

   .mainheader {
       color: #fff;
       font-size: 110pt;
   }

   .subtitle {
       font-family: helvetica;
   }

   header a {
       color: #000;
       text-decoration: none;
   }

   header a:hover,
   header a.hover {
       color: #eac961;
   }
   /*................... index header animations ...................*/

   .ani {
       -webkit-animation-duration: 2s;
       animation-duration: 2s;
       -webkit-animation-fill-mode: both;
       animation-fill-mode: both;
   }

   .slide-t {
       animation-name: slide-t;
   }

   @keyframes slide-t {
       from {
           transform: translate3d(0, 100%, 0);
           visibility: visible;
       }
       to {
           transform: translate3d(0, -100%, 0);
       }
   }

   .slide-b {
       animation-name: slide-b;
   }

   @keyframes slide-b {
       from {
           transform: translate3d(0, -100%, 0);
           visibility: visible;
       }
       to {
           transform: translate3d(0, 10%, 0);
       }
   }

运行上面的代码。您会看到两个动画都从 header div 后面完美过渡。

如果添加 CSS:

body {
margin: 0
}

到jsfiddle ，您会注意到底部动画在播放时会拉伸(stretch)。

有谁知道为什么会这样？有谁知道如何修复它？

我试过 -moz- 动画设置，没有效果。

我还有一个解决方法:

目前在 firefox 中，由于 body 边缘占用了额外的空间，我在底部有一个滚动条。如果我有办法默认将滚动位置设置为绝对右侧，我可以隐藏 X 滚动条并禁用它，这将完全隐藏 body 边距。

-

无论如何，这个让我很生气。非常感谢任何想法。

谢谢。

Answer 1

好的，所以我已经解决了这个问题。

这实际上是我笔记本电脑的显示驱动程序问题。 XPS 13 9530。

我的 friend 在他的 PC 上检查了测试站点上传，它可以正常工作，我的笔记本电脑上出现重影。所以我在另一台 PC 上进行了测试，它运行良好。

我在我的 FF 中禁用了硬件加速，但它运行良好。

我已经尝试了各种图形驱动程序，但它似乎是我笔记本电脑的 Windows 10 问题。我在使用 Firefox 渲染时遇到了一些其他奇怪的问题，例如我的标签栏上的关闭按钮重复，有时 FF 加载全白屏幕，我需要重新启动它，等等...

因此，将其标记为已修复。非常感谢您的帮助。