Question

我一直在研究这个问题的变化。目前我在所有浏览器中都可以使用动画，但在FF中将体边距设置为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);
       }
   }

运行以上操作。你会看到两个动画完全从heasder div后面转换。

如果添加CSS：

body {
margin: 0
}

到jsfiddle，您会注意到底部的阴影在播放时会延伸。

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

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

我也有一个解决方法的想法：

目前在firefox中，由于身体边缘占用了额外的空间，我在底部得到一个滚动条。如果有一种方法可以让我默认将滚动位置设置为绝对右侧，我可以隐藏X滚动条并禁用它，这会隐藏身体边缘。

-

无论如何，这个人杀了我。任何想法都非常感激。

感谢。

Answer 1

好的，我已经弄明白了这个问题。

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

我的朋友检查了他的电脑上的测试网站上传，它完美无缺，我的笔记本电脑上出现了重影。所以我在另一台PC上测试过，它运行得很好。

我在我的FF中禁用了硬件加速，它运行正常。

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

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

Answer 2

尝试使用＆＃34; px＆＃34; firefox的值，而不是＆＃34;％＆＃34;为了

transform: translate3d(0, -100px, 0);

Answer 3

导入normalize.css：

<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css">

或从以下位置下载： Here

将body设置为margin：0会导致Firefox中的CSS动画问题

3 个答案: