-webkit-translateの後にChromeで固定位置のCSSが固定される

Question

私はレスポンシブウェブデザインに基づいてウェブページを作成しています。したがって、解像度を小さくすると、ナビゲーションメニューがトップバーから削除され、iPhoneのFacebook/Pathスタイルのモバイルスライドメニューに変わります。私はthisライブラリを使用してそれを達成しました。

同時に、私はプルアップとダウン、ページの下部にドッキングすることができます下部にある固定された位置決め用パネルを持っています。 thisに非常に近いので、私のことは一番下にあり、引き上げることができます。

ここでChromeの問題があります：モバイルメニューをスライドさせて（「-webkit-transform：translateX（）」を使用して）スライドすると、固定位置のパネルがその位置を解除します。

少しの研究の後では、それはa bug in Chromeのようです。 しかし、回避策はありますか？

可能な重複：Positions fixed doesn't work when using -webkit-transform（私もその答えの私の問題のいずれかの回避策を発見していない）

どうもありがとう！

Answer 1

あなたはそれが本当にきれいで、シンプルだ

http://jsfiddle.net/stefanoortisi/DvZn2/1/

このフィドルに従うことができます。あなたは同じ構造に従うことができます。

注：なんらかの理由固定要素がz屈折率を有する必要がある：

#topbar 
    position: fixed 
    z-index: 1