Tag : html

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 とセットで使った方が吉」。

技術ネタ | , | No Comments »

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）と設定すること。

この２つを満たさないと、奥にあるはずの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自体を解釈しないみたい。

技術ネタ | , , | No Comments »

7 月 20 2008

ブラウザ再生でFlashのフレームレートが遅くなる現象

Posted by tanjo at 10:59 PM

HTMLに埋め込んだSWFコンテンツをブラウザで閲覧すると、Flashで設定されているフレームレートよりも遅く再生されてしまうことがあります。Flashの動作負荷にかかわらず15%くらいフレームレートが落ちているので、仕様的な問題なのでしょうか。

これを回避するには、HTMLの <embed> タグに wmode=”opaque” 属性を追加しましょう。
Adobe Flashを使っている場合は、パブリッシュ設定 の HTML > ウィンドウモード を「不透明表示」に変えることで対処できます。

fl_pbls

なお「透明表示」に設定してもレート落ちは解消されるようですが、今度は日本語入力に支障が出るそうです。

てんまるぶろぐ: FLASH透明表示の罠…

この方法でIE6、IE7、Firefoxでは正常になりました。
が、Safariでは効果がありませんでした。う～ん…。

技術ネタ | , , , | No Comments »