ノートの落書き感覚で発信する情報ブログ、その名も「デジテクノート2」。 沖縄から不定期で好き勝手更新しています!今年で13周年目!

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

01_20140911_position-fixed

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

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

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

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

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

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

 

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

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

それはこれ

[css]html{ transform:scale(1); }[/css]

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

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

 

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

PICK UP RELATED ARTICLE

RELATED ARTICLE

関連する記事をピックアップ! 関連記事
Powered by Google(関連コンテンツ)