google-chrome - -webkit-transform と position:fixed + position:relative レンダリングの問題

Question

position:relative を持つ要素に含まれる position:fixed を持つ要素があり、ページ上の任意の要素に -webkit-transform がある場合、Chrome と Safari に問題があるようです。説明するのが少し難しいレンダリングの問題がありますが、ここで確認できます: http://jsfiddle.net/ragulka/byGGH/1/

コード：

<div id="sticky-container">
    <div id="sticky">
        <div class="test"></div>
    </div>
</div>
<div id="long">
    <button class="pull-right">Change color</button>
    <ol>
        <li>1. Click change color. The color changes.</li>
        <li>2. Scroll down so that the red box is just half-way over the gray area.</li>
        <li>3. Click change color again. The color does not change.</li>
        <li>4. Scroll down even more. The color changes while you scroll.</li>
    </ol>
</div>
<i class="icon-spin">H</i>
<style type="text/css">
    #sticky-container {
        height: 50px;
        position: relative;
        z-index: 100;
    }

    #sticky {
        background: red;
        height: 50px;
        width: 100px;
    }
    button {
        margin-top: 100px;
    }

    #sticky.blue {
        background: blue;
    }

    #long {
        height: 1000px;
        background: silver;
        position: relative;
        z-index: 0;
    }

    .icon-spin {
      display: inline-block;
      -moz-animation: spin 2s infinite linear;
      -o-animation: spin 2s infinite linear;
      -webkit-animation: spin 2s infinite linear;
      animation: spin 2s infinite linear;
      width: 10px;
        height: 10px;
        background: yellow;
        position: absolute;
    }
    @-moz-keyframes spin {
      0% {
        -moz-transform: rotate(0deg);
      }
      100% {
        -moz-transform: rotate(359deg);
      }
    }
    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(359deg);
      }
    }
    @-o-keyframes spin {
      0% {
        -o-transform: rotate(0deg);
      }
      100% {
        -o-transform: rotate(359deg);
      }
    }
    @-ms-keyframes spin {
      0% {
        -ms-transform: rotate(0deg);
      }
      100% {
        -ms-transform: rotate(359deg);
      }
    }
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(359deg);
      }
    }
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" />
<script type="text/javascript">
    $(document).ready(function() {
        $('#sticky').affix(100);

        $('button').on('click', function() {
            $('#sticky').toggleClass('blue');
        });
    })
</script>

これは Firefox で問題なく動作します。IEでテストしていません。

他の誰かが同じ問題を抱えていますか、それは既知のバグですか、それとも何か間違っていますか?