Firefox for Mac displaying scrollbar behind child elements

Question

in Firefox 25.0.1 and Firefix 26 for Mac (on Mavericks), I am running into a lot of issues with Firefox displaying the scrollbar behind child elements of divs with an overflow-y:scroll; (or auto) on them. I created a simple JS fiddle that shows this behavior (code below): http://jsfiddle.net/barts/6y4ce/

If you start scrolling, the #toolbar div will overlap the scrollbar, which has a z-index:20 on it. If I take out the z-index then the scrollbar will correctly display over the toolbar. But if I leave the z-index and set one on the #container div, it doesn't matter if I make it a higher or lower number, the scrollbar always goes under the toolbar.

Am I missing something simple? In Safari and Chrome the scrollbars always show on top.

    <style type="text/css">

    * { 
        box-sizing:border-box; 
        -moz-box-sizing: border-box;
    }

    #container {
        width:500px;
        height:500px;
        background:#ccc;
        overflow-y:scroll;
    }

    #toolbar {
        background:#efefef;
        position:relative;
        z-index:20;
        width:100%;
        padding:20px;
        height:50px;
    }

    </style>


    <div id="container">

        <div id="header">

            <h1>Test</h1>

            <div id="toolbar">

            </div>
        </div>

        <div id="content">

            <p>Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.</p>

            <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

            <p>Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.</p>

            <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>


            <p>Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.</p>

            <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>


            <p>Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.</p>

            <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>


            <p>Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.</p>

            <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

        </div>

    </div>

Answer 1

There are several ways to fix this particular problem; one such way is use the overflow-y property in the container div as before, although using the other properties in the content div instead. Within the html you'll need to swap the positions of the divs container and header, and also nest the content div within the container div.

#container {
    width:500px;
    height:500px;
    background:#ccc;
    overflow-y:scroll;
}

#content {
    background:#ccc;
    z-index:1;
    position:relative;
}

Example (JSFiddle)