css - webkit のレンダリングが translate3d の方法を誤解していた (バグあり)

Question

最初に言いたいのは、私はこの「問題」の解決策を探しているのではなく、それがどのように機能するかを理解したいだけです（または、正しく言えば機能しません）。

たとえば、次のブロックがあります。

#block {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: #0000ff;
    -webkit-transform: translateZ(0);
}

.hidden {
    -webkit-transform: translate3d(-500px, 0, 0)!important;
    /*display: none!important;*/
}

クリックイベントを処理するためのランダムな別のブロックを #block のトグルクラス関数でサイズ変更し、画面上のスクロールバーを取得するためにサイズを変更します

繰り返しになりますが-はい、座標系のため、translate3dで固定位置を使用できないことはわかっています(実際には、その仕組みを完全には理解していません.. :( )、クロム/ウェブキットの仕様とバグレポートを読みましたが、理由を理解したいだけです。つまり、ブラウザがそれをどのように見て、なぜレンダリングが非常に奇妙であるかを意味します...

ここでいくつかの観察：

翻訳位置を変更します (完全に非表示 -> -500px):

- with scrollbar on screen :
    render hide/visible through time,
    like(one action = one click): hide-visibility(hidden-state) -> hide(visible) -> hide(hidden) -> visible(visible) -> hide(hidden) -||-

- without scrollbar on screen :
    nothing rendering; only then something redraw on screen(like scrolling or add textcontent to block(not in layer))

翻訳位置の変更 (表示 -> +50px):

- with scrollbar on screen :
    works well, changing position on each time

- without scrollbar on screen :
    nothing rendering, only then something redraw on screen

表示なし/ブロックの変更:

- with scrollbar on screen :
    hide block, after nothing rendering; only then something redraw on screen

- without scrollbar on screen :
    hide block, after nothing rendering; only then something redraw on screen

'position:absolute' を使用して translate(position) を変更すると、すべての場合で正常に動作します。

Chrome 33.0.1726.0 でのみテストしているため、別のブラウザでは動作が異なると思われます