jquery.mobile-menu.jsでposition:fixedが効かない件

ドロワーメニューを
簡易的に実装出来るプラグイン「jquery.mobile-menu.js」で
メニューを「開く」→「閉じる」した際に
position:fixed
をかけていた要素が
いつのまにか固定されていないという事象がありました。

よくよく調べていくと、
「translate」を親に持つ子要素のposition:fixedは全て無視されるという
cssの仕様のよう・・・

「jquery.mobile-menu.js」の仕様は
①横から出てくるメニュー意外の要素全体を一つの要素で包み
②メニューボタンを押して開く際、その要素に対してtranslateX(●●px)で横にスライドさせる
③閉じる際には、translateX(0px)で初期位置に戻す

こんな感じになっているようです。

なので、読み込み時なかったtransform属性が
メニューを開閉することによりtranslate(0px)として残っているため
閉じた後は、子要素のposition:fixedが無効化されてしまっていたというわけでした。

解決策としては「jquery.mobile-menu.js」内の

 page.css({
            "-webkit-transform": "translateX(0px)",
            "-moz-transform": "translateX(0px)",
            "-o-transform": "translateX(0px)",
            "-ms-transform": "translateX(0px)",
            "transform": "translateX(0px)"
          });

上記の記述を

 page.css({
            "-webkit-transform": "translateX(none)",
            "-moz-transform": "translateX(none)",
            "-o-transform": "translateX(none)",
            "-ms-transform": "translateX(none)",
            "transform": "translateX(none)"
          });

こう直すことで、閉じた後にtransformが無効化され
position:fixedが復活するようになりました。