Setting body to margin:0 causes CSS animation issue in Firefox - html

Question

I've been working on variations of this issue for a while. Currently I have the animation working in all browsers, but setting the body margin to 0 in FF breaks it as shown below.
I've had to target all other browsers, set the body margin, and just leave it showing in FF. Obviously this isn't ideal as I'd like the layout to be uniform.
Please use firefox to re-create the issue.
Here's the working Jsfiddle
HTML
<header class="header">
<div class="header-container">
<div class="top-header-ani ani slide-t navbar">
Home</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 & 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);
}
}
Run the above. You'll see that both animations transtion from behind the heasder div perfectly.
If you add the CSS:
body {
margin: 0
}
To the jsfiddle, you'll notice the bottom aniation stretches as it plays out.
Does anyone know why this is occuring?
Does anyone know how to fix it?
I've tried -moz- animations settings, no effect.
I've also got an idea for a work around:
Currently in firefox I get a scroll bar at the bottom due to the extra space taken up by the body's margin. If there's a way for me to set the scroll position to the absolute right by default, I can hide the X scroll bar and disable it which would hide the body margin entierly.
-
Anyway, this one's killing me. Any ideas are greatly appreciate.
Thanks.

Answer 1

Ok, so I've figured out the issue.
It's actually a display driver issue with my laptop. XPS 13 9530.
My friend checked the test site upload on his PC and it works perfectly as it is, I get the ghosting on my laptop. So I tested on another PC, and it works perfectly.
I disabled hardware acceleration in my FF and it works perfectly.
I've tried various graphics drivers, but it appears to be a windows 10 issue with my laptop. I'm getting a few other weird issues with firefox rendering, for instance the close buttons on my tab bars are duplicated, sometimes FF loads with a full white screen and I need to restart it, etc...
So, mark this as fixed. Thanks very much for your help.

Answer 2

Try using "px" values for firefox, not "%" for
transform: translate3d(0, -100px, 0);

Answer 3

Import the normalize.css:
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css">
or download it from:
Here