Th not absolute when hardware acceleration enabled

Question

(This bug occurs in the newest versions of Google Chrome and Firefox)

I have build a table where each row starts with a <th> which is absolute positioned and stays when scrolled horizontally.

Due to the size of the final table I need hardware acceleration to be enabled for smoothness in scrolling.

I enabled hardware acceleration with this piece of CSS-Code:

-webkit-transform: translate3d(0, 0, 0);

When Hardware-Acceleration is enabled, the absolute <th>'s will scroll with the rest of the table (which it should not).

Is there any way to achieve the <th>'s to stay absolute with hardware acceleration enabled?

With Hardware-Acceleration: http://jsfiddle.net/0sjmzaru/

#table_container {
    width: 300px;
    height: 150px;
    float: left;
    display: block;
    overflow-x: scroll;
    -webkit-transform: translate3d(0, 0, 0); /* activate hwa but causes bug */
}
#table {
    table-layout:fixed;
    width: 100%;
    border-collapse: collapse;
}
th,td {
    border: 1px solid #d7d7d7;
}
th {
    width: 100px;
    background: #888;
}
td {
    width: 50px;
    height: 15px;
    background: #CCC;
}
tbody th {
    position: absolute;
    background: #fff;
    font-size: 13px;
    margin-top: -1px;
}

<div id="table_container">
With Hardware Acceleration enabled:
    <table id="table">
        <thead>
            <tr>
                <th></th>
                <th>01.01.2015</th>
                <th>02.01.2015</th>
                <th>03.01.2015</th>
                <th>04.01.2015</th>
                <th>05.01.2015</th>
                <th>06.01.2015</th>
                <th>07.01.2015</th>
                <th>08.01.2015</th>
                <th>09.01.2015</th>
                <th>10.01.2015</th>
                <th>11.01.2015</th>
            </tr>
        </thead>
        <tbody>
           <tr>
               <th>User 1</th>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
            <tr>
               <th>User 2</th>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
        </tbody>
    </table>
</div>

WithOUT Hardware-Acceleration: http://jsfiddle.net/0sjmzaru/1/

#table_container {
    width: 300px;
    height: 150px;
    float: left;
    display: block;
    overflow-x: scroll;
}
#table {
    table-layout:fixed;
    width: 100%;
    border-collapse: collapse;
}
th,td {
    border: 1px solid #d7d7d7;
}
th {
    width: 100px;
    background: #888;
}
td {
    width: 50px;
    height: 15px;
    background: #CCC;
}
tbody th {
    position: absolute;
    background: #fff;
    font-size: 13px;
    margin-top: -1px;
}

<div id="table_container">
With Hardware Acceleration DISabled:
    <table id="table">
        <thead>
            <tr>
                <th></th>
                <th>01.01.2015</th>
                <th>02.01.2015</th>
                <th>03.01.2015</th>
                <th>04.01.2015</th>
                <th>05.01.2015</th>
                <th>06.01.2015</th>
                <th>07.01.2015</th>
                <th>08.01.2015</th>
                <th>09.01.2015</th>
                <th>10.01.2015</th>
                <th>11.01.2015</th>
            </tr>
        </thead>
        <tbody>
           <tr>
               <th>User 1</th>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
            <tr>
               <th>User 2</th>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

Some interesting material for the "null transform hack": https://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/

According to this:

• It switches on the hardware compositing mode in Chrome, assuming it’s supported for the platform you’re on and isn’t on already.

• It creates a new layer with its own backing surface in Chrome.

I would guess that by moving the element into another layer, the browser (chrome) is unable to detect the right bounds of it's parent - so it's like adding "position: relative;" to the parent element.

But you could still try out this solution: https://developer.mozilla.org/de/docs/Web/CSS/will-change

will-change: scroll-position;

As of August 2015, Chrome 36+, Opera 24+, and Firefox 36+ support the will-change property.