2010
2/1

Firefox3.6でフルFlashサイトを表示した際に余計なスクロールバーが表示されてしまう問題の解決策（SWFObject2.x版）

Firefox3.6になってから、フルFlashサイト（ブラウザ領域の横100%x高さ100%にFlashコンテンツを表示しているサイト）で、「Flash領域をクリックすると余計なスクロールバーが表示される」という問題が出るようになった件、解決策を見つけました！

結論（2010.04.06追記）

以下の記事では複数の解決策について触れていますが、Tonpoo個人としては専ら最後の「追記」で示した「CSSでobject要素にoutline:none;を指定する」という方法を採用しています。

object{
	outline:none;
}

理由は、SWFObject以外のライブラリなどを使っていたとしても有効であること、id指定の位置に影響されないことなど、「とりあえずこれを指定しておけば大丈夫」という印象を抱いたためです。object要素のoutlineがnoneになることのデメリットが判明したら再考しますが、当面はこれで対処するつもりでいます。

以上、ご参考まで。

Flashコンテンツのid（attributes.id）を指定していない場合

HTMLコンテナのidとして指定しているidに対して、CSSでoutline:none;を設定すると直ります。

例えば、SWFObject 2 HTML and JavaScript ジェネレーター v1.2で、サイズの指定を「100 x 100%」にして生成した下記のようなhtmlソースの場合。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<meta http-equiv="Content-Script-Type" content="text/javascript;" />
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			var flashvars = {};
			var params = {};
			var attributes = {};
			swfobject.embedSWF("untitled.swf", "myAlternativeContent", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
		</script>
	</head>
	<body>
		<div id="myAlternativeContent">
			<a href="http://www.adobe.com/go/getflashplayer_jp">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
	</body>
</html>

CSSで下記のように指定します。

#myAlternativeContent {
	outline:none;
}

Flashコンテンツのid（attributes.id）を指定している場合

outline:none;を使うのは一緒ですが、HTMLコンテンツのidに対してではなく、Flashコンテンツのid（attributes.id）に対してCSSを指定します。

例えば、下記のソースの場合：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<meta http-equiv="Content-Script-Type" content="text/javascript;" />
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			var flashvars = {};
			var params = {};
			var attributes = {};
			attributes.id = "myFlashContent";
			swfobject.embedSWF("untitled.swf", "myAlternativeContent", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
		</script>
	</head>
	<body>
		<div id="myAlternativeContent">
			<a href="http://www.adobe.com/go/getflashplayer_jp">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
	</body>
</html>

CSSは下記のように指定します。

#myFlashContent {
	outline:none;
}

SWFObject2のフォーラムでも取り上げられているけど、回答が着いてない模様。twitterでもつぶやいてる人がいたりもしたんだけど、肝心の解決策が見つからない・・・、と思った矢先、非常に参考になったのが下記の記事。

lancia desginlogue: [Flash] FireFox 3.6 の 親切の様な困った仕様対策(クリックでスクロール出ちゃうやつ)

Progressionの場合。
progression.cssの#flashcontent:focus に対して以下を追加！

outline:none;

で・・・いけました。

これだ！ということで、上記を参考に試行錯誤して、なんとか解決できました。よかった。

【追記】CSSでobject要素にoutline:none;を指定する

この問題、フルFlashに限った事ではないみたいですね。どうやらFirefox3.6から、SWFObject（など）でSWFを表示させている場合、SWFにフォーカスが移るとSWFの周囲に1ピクセルのドットが表示されるようになった、ということらしいです。実際、フルFlashでもなんでもない、HTMLページに普通に埋め込まれているFlashコンテンツをクリックしてみたところ、確かに周囲にドットが表示されました。

SWFObjectのFAQページに以下のような記述がありましたが、もしかしてこちらのほうがより有効かもしれませんね。

15.Windows版Firefox3でwmodeをtransparentかopaqueにした時、SWFの周囲に点線が表示されるのはなぜ？

（中略）下記のスタイルをページの頭で指定すると解決します。

<style type="text/css" media="screen">
	object{outline:none;}
</style>

「Firefox3.6で」っていう話ではないし、wmodeを変更した時限定のトピックですが、やってる事（要素の周囲のドットボーダーを消す）は一緒。実際、試してみましたが、この方法でもＯＫでした。

Filed under: firefox,flash,tips,troubles,未分類 — Comments (5)— tonpoo @ 12:32 PM

5件のコメント »

  1. ありがとうございます。
    swfAddress使った一部のフルフラッシュサイトで発生したので最初は？だったのですが、スクロールバーの出るタイミングがURLが切り替わる瞬間だったので原因を発見できました。
    おかげさま解決できました。本当に助かりましたー！

    Comment by ズーラシア — 2010 年 2 月 4 日 @ 5:31 PM

  2. すみません。swfAddressじゃなく、SWFObject2ですね。失礼しました。

    Comment by ズーラシア — 2010 年 2 月 4 日 @ 5:35 PM

  3. ＞ズーラシアさん
    コメントありがとうございますー！お役に立てて幸いです。

    Comment by tonpoo — 2010 年 2 月 4 日 @ 5:38 PM

  4. 以前にコメントさせていただいたkawataです。

    これ、最近私の環境でも起こってて、macの調子もちょっと悪かったりしたから
    そのせいかと、半ばあきらめモードでした。

    firefoxのせいだったんですね！

    貴重な情報ありがとうございました！

    Comment by kawata — 2010 年 2 月 17 日 @ 11:41 PM

  5. ＞kawataさん
    コメントありがとうございます！役に立ってよかったですー。

    Comment by tonpoo — 2010 年 2 月 18 日 @ 12:10 AM

この投稿へのコメントの RSS フィード。 TrackBack URL

コメントする