Tag : css

2 月 18 2009

IE6でposition:absoluteの要素が表示されないバグ

Posted by tanjo at 4:32 PM

前回のCSSのz-indexを使ってFlashを背景表示する例にて、Internet Explorer 6 だと絶対配置(position:absolute)のFlash領域が消えてしまう、という問題があったんですが、無事解決できました。

IE6で position:absolute の要素が消えてしまう条件というのは結構ややこしくて、原因を見抜くのに一苦労してしまうことがありそうです。以下のサイトで詳しく検証されていました。

» jmblog.jp - IEで絶対配置(position:absolute)のボックスが消えるバグの検証

さて、私の場合はというと、絶対配置する要素の前で float を使っていたのが原因のようでした。(たぶん、一番陥りやすいパターン?)
事前に clear しておいてもなぜか効果がない(=表示されないまま)の場合があるっぽく、一瞬つまずきましたが、絶対配置の要素自体に clear:both を使うことで解決!

#absolute {
	position: absolute;
	clear: both;
	...
}

教訓。「position:absolute は clear:both とセットで使った方が吉」。

2 月 13 2009

CSSのz-indexを使ってFlashを背景表示する例

Posted by tanjo at 3:36 PM

CSSのz-indexを使ってFlashを背景表示する…ときの注意点とか、やってみて気づいたこと。

zindex

使ってみた例というのは、こないだ作ったサイトです。
» 多摩美術大学 グラフィックデザイン学科 卒業制作展 2009 [WOW]

やりかた

この方法、たぶん「HTMLのプルダウンメニューがFlash領域にかぶってしまうとき」なんかには割とよく使われるのでしょうか?私の例では、「HTMLページの背景余白にでっかいFlashを表示する」とかいう妙な使い方だけど。

HTML↓↓

<div id="content">
  <!-- ここにHTMLのページコンテンツ -->
  ほげほげ
</div>
<div id="flash">
  <!-- ここにFlashを(不)透明表示設定で挿入する。 -->
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
    <param name="movie" value="main.swf" />
    <param name="wmode" value="transparent" />
    <embed src="main.swf" wmode="transparent" type="application/x-shockwave-flash" />
  </object>
</div>

CSS↓↓

#content {
	position: relative;    /*通常どおりの位置に配置*/
	z-index: 1;
}
#flash {
	position: absolute;    /*#contentの後ろ側にW100%, H500pxで配置*/
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
}

とまあ、ソースはこんな感じです。z-index はブロックレベル要素の描画レイヤーの上下を設定できるプロパティです。(数字が大きいほど手前になる。)
注意点としては、

  • レイヤー関係を反映させるには、通常どおりの位置に表示させたい要素も、position: relative; と指定する。無指定(position: static)のままではダメ。
  • Flashを挿入するとき、<param>タグや表示用のJavaScriptで、wmode を transparent(または opaque)と設定すること。

この2つを満たさないと、奥にあるはずのFlashが手前に表示されてしまったりするようです。

マウスフォーカス

さて、ここまではトラブルなくできたんですが、今回の私の例だと、「実は背景Flash領域もクリッカブル。マウスのフォーカスってどうなるんだ?」という疑問がありました。
結論から書くと、「細かいところは環境依存」ぽいです。

HTML部分の方が手前にあるので、テキストの選択やリンクは問題なく動作しました。でも、行間でのクリックとか、右クリックのコンテキストメニュー(HTMLメニューかFlashメニューか)は、ブラウザと、それとOSによっても異なるみたいです。
一応上側に来るブロックレベル要素に背景色や背景画像をしてやると、Flashのクリック判定はなくなるようですが、Macだと右クリックはFlashメニューが表示されたりと、けっこういろいろ。

ま、マウス判定はちょっと微妙なところがありましたが、表示上は綺麗にレイヤー化してくれたので、HTMLテキストや透過GIFの後ろ側に動くFlashが表示されるというのはなんか新鮮で面白かったです。

誤動作?

確認済みの誤動作について。やっぱり妙な表現はあんまりするモンじゃありませんかね(^^;

  • IE6 だとFlash用のブロックレベル要素が表示されない。でもこれはz-index関連のトラブルではなくて、position: absolute; に対する IE6 独自のバグっぽい。詳しいことは調査中。
    » 解決しました。
  • Mac OSX 10.4 Firefox 3.0 にて、HTMLのリンクにカーソルを乗せると、一瞬だけFlashが上に描画されて画面がちらつくという報告が。10.4 Safari や 10.5 Firefox 3 では確認できず。??
  • とっても古いSafari(1.2とか)はz-index自体を解釈しないみたい。

7 月 04 2008

AutoPagerizeでスクロールが重くなるのを回避する

Posted by tanjo at 5:31 AM

autopg1

ピンポイントネタ。
Firefoxの、Greasemonkeyというアドオンの、AutoPagerizeというスクリプトが、実はスクロールにかなりの負荷をかける仕様になってる、ということへの対処法(代替スクリプト)が公開されていました。

AutoPagerize を少し高速化 (update 0.0.31) - GANAwareはてな版

何それ?という人のために簡単に説明します。
まず、Greasemonkeyとは、ユーザがウェブを閲覧するとき任意にスクリプトを実行させることができるようになる拡張。つまり、ユーザスタイルシートじゃできないような挙動や表示に関する細かいページのカスタマイズが可能になるわけです。
*可能になるだけで、別個スクリプトをインストールする必要があります。
*Greasemonkeyは多少、セキュリティ上に問題があるそうです。自己責任でお願いします。

AutoPagerizeはその代表的なスクリプトで、たとえばGoogle検索とかITmediaの記事みたいな何ページにもわたる内容を、下方にスクロールするだけで(ページを切り替えずに)次々と表示してくれるというシロモノです。
Live Search 画像検索みたいな状態、と言えば分かりやすいでしょうか。

で。非常に便利なのはいいんですが、CPU使用率を見てみると、AutoPagerizeがオンの時は通常より、スクロールに3倍くらいの負荷がかかっているようでした。
原因は「FirefoxのレンダリングはCSSの position: fixed; 系に弱いため」みたいです。

紹介したganawareさんの修正版では、position:fixed を position:absolute に変更し、スクロール後1秒たったらバーの位置に合わせて top: を修正する、…という方法で対処されているとのことです。なるほど!

ついでにスクロールが重くなる状況について少し調べてみました。
position: fixed; だけでなく、背景画像を固定するための background-attachment: fixed; とも相性が悪いようです。たとえば、以下のようなページをFirefoxで閲覧すると、スクロールが激重になるはずです。C2Dでも楽々CPU使用率50%突破しました。
特にFirefox 2.0の方が顕著で、overflow: auto; とかと組み合わさると描画が乱れたりします。Firefox 3.0では解決されてると思いきや、…どうやら負荷がかかりやすいのは相変わらずのようですね。

スクロールが重くなるサンプルページ
(スムーズスクロール有効だとより重くなります)

サンプルHTML

<body>
<div>
	<pre>スクロールが重くなる</pre>
	<pre>スクロールが重くなる</pre>
	......
	<pre>スクロールが重くなる</pre>
</div>
</body>

サンプルCSS

body {
	/* fixed: スクロールが重くなる  scroll: 通常 */
	background: #eee url(./bodybg.gif) fixed;
}
pre {
	/* auto または scroll: 描画が乱れやすい  hidden: 通常 */
	overflow: auto;
}

ウェブを作るときは注意しないと、ですね。