Firefox not displaying header correctly - html

Question

I have a question regarding my previous post:
Animation stop with css3
The slider works perfect in Chrome. In firefox however it is not working properly. Does anyone here have an idea?
Slider can be found here http://jimmytenbrink.nl/slider/
It looks like there is a problem in firefox with positioning absolute + display: table-cell.
My code is as follows:
<header>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div >
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
</header>
And the css;
header {
margin-top: 10px;
width: 1185px;
display: table;
overflow: hidden;
background-color: #000;
height: 500px;
}
header > div {
background: url('./images/iron_man_bg.jpg');
width: 123.8px;
height: 500px;
position: relative;
-webkit-transition: width .3s;
transition: width .3s;
display: table-cell;
border: 2px solid #fff;
overflow: hidden;
}
header div:first-child {
margin-left: 0px;
}
header div:last-child{
margin-right: 0px;
}
header div:hover span {
left: 50px;
opacity: 1;
}
header > div img {
position: absolute;
left: -240px;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-filter: grayscale(1);
overflow:hidden;
}
header > div span {
-webkit-transition: left .3s;
transition: left .3s;
position: absolute;
bottom: 30px;
color: white;
left: -70px;
opacity: 0;
width: 151px;
font-family: 'Fugaz One', cursive;
text-transform: uppercase;
color: #fff;
font-size: 24px;
text-shadow: 0px 0px 10px #f1f1f1;
filter: dropshadow(color=#f1f1f1, offx=0, offy=0);
}
header > div:hover {
width: 920px;
}
header div:hover img {
left: 0px;
-webkit-filter: grayscale(0);
}

Answer 1

Here is what works:
http://codepen.io/jeremyzahner/full/cAEbv
Basically, i added a new container inside the "div" with class .inside. On that i do width:100%; height:100; position:relative; overflow:hidden;. Plus, i did remove the fixed height on the outer divs, since the header already holds that fixed height, it is not necessary to set it again.
It is a knonw "bug" of firefox that it treats display:table-cell; divs like that. I don't think they will fix it soon. So the best workaround (at least in my experience) is another inner wrapper like here.
CSS Modification:
header > div .inside {
position:relative;
width:100%;
height:100%;
overflow:hidden;
}
header > div {
background: url('./images/iron_man_bg.jpg');
width: 123.8px;
position: relative;
-webkit-transition: width .3s;
transition: width .3s;
display: table-cell;
border: 2px solid #fff;
overflow: hidden;
}
HTML Modification:
<div>
<div class="inside">
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
</div>
This was tested in actual version of Chrome and Firefox (on Ubuntu).
Hope this helps