Firefox not displaying header correctly

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