【うわぁぁハマったぁぁ】モダンブラウザ（Chrome / Firefox / IE）でPosition:Fixedが一切効かない時はアイツを確かめてみよう

こふす(@_cofus)

2014年09月12日（約10年経過）

最近地味にブログのテーマをちょくちょく変更している私(@こふす)です。

気づいている方居るのかな？実は壁紙が白一色から画像に変わってたり、SNSボタンをオリジナルにしたり、後パフォーマンスを上げたりしています٩( ‘ω’ )و //／

さてさて今回はこのブログで最近まで起こっていたPosition:Fixedが一切効かないという状況を打開した時の手順をご紹介したいと思います。

上のヘッダーバーがある時を境にFixedしなくなった

このブログでは上のヘッダーバーをスクロールしても固定されるようにデザインしているんですが、ある時デザイン編集をしたのを堺に一切Position:Fixedが効かなくなり、固定されなくなってしまったのです。

心当たりをあたっても全くわからないし、iPhone Safari以外のどのモダンブラウザ（Chrome / Firefox / IE）で表示しても固定されないし途方に暮れていました。

原因はある１行のCSSだった

CSSファイルを圧縮しようと整理していた時に偶然見つけたのがまさかの原因でした。

それはこれ

何故か要素を拡大するtransform:scale()をhtml全体にX方向Y方向とも1で固定してしまっていました。

打った覚えがないのでなんとも言えないですが、取り敢えず削除するとFixedが復活しました。

Position:Fixedが一切効かないという方はもしかすると私のようにtransform:scale()が設定されているかもしれませんよ。

こふす(@_cofus)

2014年09月12日（約10年経過）