Firefox3.5のposition:fixedとアメブロのユーザー定義CSS

CSS
これは2009/10/16にAmebloに投稿した記事です。

アメブロ(ameblo)でのブログ記事の執筆/編集

amebloでは、入力された記事から改行を全て取り除く(標準エディタでのHTMLタグ編集)ので、
<pre>タグを使う場合には多少注意が必要ですが、
利用可能なタグの種類の多さとユーザー定義CSSが利用可能という事で、意外にも結構な自由度があります。
このブログデザインもBlogara:ブロガラと同様な外見にする事が出来るなど、
カスタマイズ好きなユーザーにもそこそこ面白いブログでは無いかと思われます。

今回ブログを書くにあたっては、amebloの編集フォームに書きプレビューで確認するのではさすがにエライ面倒なので、
実際のブログ記事のHTMLを保存し、それから不要な要素を取り除いたファイルをブログテンプレートとし、
それをローカルの環境で編集/表示確認する事でブログ記事を書いています。

これにより、使い慣れたエディタ(aptana)上での作業が可能という事で、
入力フォームへの記述と比較すると、エディタの各種支援機能が使える為作業効率が格段に上がり、
HTML/CSSの編集結果も素早く確認出来ますので、非常に快適な執筆が可能になります。

が、ローカル環境でameblo上での表示状態を完全に再現出来るとは限らず、
実際にamebloで表示させてみたら意外な個所に違いが出てくる場合も有ります。
そこで今回はその差異から生じた問題に対応します。

画面をスクロールさせると非常に重い

Webブラウザ

現在、開発環境と通常のWebブラウジングにはFirefox3.5を利用しています。
Firefoxは、FirebugやNoScript,Greasemonkeyなどの有用プラグインがあり、
CSS3やHTML5の仕様(候補)のいくつかを既に実装し、
IEのように遅くは無く、またGoogleChromeのような速過ぎて開発環境としては逆に微妙なものでも無いという、
非常にバランスが取れ使い勝手の良いブラウザです。

このブログもFirefox3.5でチェックを行い、その後Chrome3.0,Opera10,IE6/8などで確認を行っていますので、
前回の記事も、問題無い事をローカル環境のFirefox3.5上で確認してからamebloに投稿するという流れでした。

が、いざameblo上にアップされた記事をFirefox3.5で見てみると、
明らかに画面スクロールが遅くガタガタします(要するに描画が重い)。
IEなど他のブラウザで確認してみると問題無いという事で、
それに関しては完全に思い当たる節があるので、まずその点を疑います。

border-radius/box-shadow

Blogaraやこのブログでは、
border-raduis(-moz-border-radius)、box-shadow(-moz-box-shadow)、text-shadowという、
CSS3の仕様採用候補(text-shadowはCSS2の仕様)であり、
今後各ブラウザでサポートが進むであろう機能を多用しています。

こちらで確認出来るいくつかのブラウザの中では、
それらを全くサポートしていないブラウザ(IE6/8)や、一部サポートするブラウザが有りますが、
Firefox3.5ではその3つの全てが表示されます。
# というよりFirefox専用の記述を追加して対応させているというのが実際の所であって、
# -webkitをprefixとして指定すればChromeでも全て表示されます。

その為、それらの表示による追加処理が発生するFirefox3.5で重いというのは予想出来た事でもあります。
そこでこれら3つのプロパティをユーザー定義CSSから削除して確認してみたところ、
スクロールした時の表示速度がある程度改善し、
さらに、明らかに描画が遅れていた<pre>を、
overflow:autoでは無く、overflow:hiddenに設定する事でも幾分の改善が見られます。

が、やはりまだローカル環境より明らかに遅い状態が明確に判ります。

ローカル環境との違い

と、この時点になってようやく、何故ローカル環境では問題無いが、
ameblo上では重いのかという点に注目し、それの原因を追求する事にします。

ローカルで編集する為のブログテンプレート作成では、不要な要素(画像/JavaScript)を削除しましたが、
それと同時に、特に必要では無いだろうと思われるファイル(CSS)はローカル環境では読み込んでいませんでした。

そこで改めて、ローカル環境の表示とameblo上の表示を見比べてみると、
明らかな違いと、いかにもスクロールに影響を及ぼすであろう要素があります。
それが、ul#amebaBarで指定されるposition:fixedな最上部固定のアメブロメニューバーです。

試しに最上部固定のメニューバーをローカル環境でも表示してみた所、明らかなスクロール速度低下が発生します。
原因は判明しましたので、次はその対策を行います。

position:fixedとFirefox3.5

という訳で早速、firefox fixed positionでググってみたところ、
position:fixedなdivエレメントが表示されていると、スクロールした時にチラつく現象が起こる問題が認識されており、
既に解法も判明しているがFirefoxの安定版にはまだ実装されていない模様です。
Fixed Positioned DIV flickers on page-scroll when set for Overflow: Visible

こちらでも、fixedなdivエレメントを含むページを作成し、
上記ページに対処法として書かれている当該エレメントにoverflow:autoを設定してみましたが、
チラつく症状は改善しましたが、速度的には劇的には改善しません。

アメブロメニューバーはdivでは無くulですが、同じブロックレベル要素という事で、
同じ様な問題があるのでは無いかと勝手に判断し、
今回の問題に関しては、簡単で安直な対応としてposition:fixed指定の変更を行う事とします。

CSSのセレクタの詳細度

position:fixedが指定されているのは、ユーザー定義CSSでは無くameblo設定のCSSですので変更は出来ません。
が、CSSではより詳細度の高い記述を優先するという特性を利用し、
ユーザー定義のCSSでamebloシステム設定のCSSを上書きします。

#mainIndex ul#amebaBar {
position: absolute;
top: 0px;
margin-top: 0px;
}

これを利用すればアレやコレや不要と思われるエレメントを非表示にするような事も可能ですが、
アカウント停止になる恐れが高いので止めておいた方が無難です。
今回は固定表示のメニューバーを非固定表示にしただけなので、さすがに大丈夫だとは思いますが。

結果

position:fixed設定を変更する事で、ameblo上でもストレス無いブログ閲覧が可能になりました。

CSS3に関しては、
レイアウトの為にdivエレメントを多用する事は残念ながら暫く続きそうですが、
特に、所謂角丸デザインの為に無駄なエレメントや画像を追加する事を回避出来るborder-radiusは、
早いところ多くのブラウザでサポートしてもらいたいものです。

余談ですが、
ユーザー定義CSSを許可する場合には、システム的に必ず表示されるべきエレメントを保護する為に、
ユーザー記述の!important宣言は許可しない/強制的に削除すべきなのではないかと思われます。

便利ツール

Firebug - 指定のエレメントに何のCSSプロパティが適用されているかが簡単に判り、変更してみる事も可能

参考資料

O'Reilly CSS完全ガイド - Amazon(+associate)
Fixed Positioned DIV flickers on page-scroll when set for Overflow: Visible