cssのposition: fixedが効かないというお話。

しかも大体のブラウザで発生。
調べていくと、レンダリングエンジンのバグかCSSの仕様かちょっとわからないのだけれど、悪さをしていたのは、fixedをつけている要素の親要素というか先祖要素。

そいつに

transform: ～

のCSS指定があった。ぶっちゃけ外したら直ったのだが、もともと書いていたわけではなく、jPanelMenuというプラグインが勝手につけていたのだ。

このプラグイン自体はかなり便利なのだが、オプションでtransformの属性を外す指定がない。
今回は力技で、ブラウザがtransformをサポートしているかどうかを判定している箇所を書き換えて対応した。

/* transformsSupported:
  'WebkitTransform' in document.body.style ||
  'MozTransform' in document.body.style ||
  'msTransform' in document.body.style ||
  'OTransform' in document.body.style ||
  'Transform' in document.body.style */
transformsSupported: false

こんな感じ。

関連記事

コメント