REDLINE MAGAZINE | IE6 → 透過PNG+overflow=混ぜるな危険（追記有）

IE6 → 透過PNG+overflow=混ぜるな危険（追記有）

>>081205：追記　解決しました

(追記:081205)はてブのコメント見たらこの下記の症状が出ない方もいらっしゃるみたい。私が検証に使ってるIE6はIETesterのものと「IE6 standalone の落とし穴」っていう記事で書いた透過も使えるこっちのスタンドアローン版IE6なんだけど、もしかしてもしかして正規版では正常に動作してるとか？？コメント書いてくださった方が正規版IE6なのかどうかは分からないけれども、一応その件も補足しとこかなということで追記。

やりたかった事

• 親ボックスには大きめの写真を入れたい。
• その親ボックスの写真は背景じゃなく、諸事情でimgタグで入れること。
• その中にまたボックスを作って背景に透過PNG画像を使用してテキスト本文入れたい。親ボックスの写真が透ける感じで。
• そのテキスト本文部分は幅高さ固定のボックスで内容量が多いときはスクロールする。

つまり見た目はこういう感じ。

実際にはそういう半透明なボックスがこのimgで入れた写真の上に他にもいくつかある感じ。とりあえず今回は１個でいきますね。

要望を聞いて脳内コーディングした結果、親ボックスdivにrelative与えて普通にimgで写真入れる。その後インナーのボックスをabsoleteでそれぞれ定位置に配置しよう。IE6の透過PNGの処理はfilterで。よっしゃ、かかってこいや。(0.19 秒)

とりあえずサンプルいきます。

その時点での脳内コーディングを実際再現したhtmlとcssがこんな感じ。

<style type="text/css"><!--
#sample{
	position:relative;
	width:600px;
	height:450px;
	border:1px solid #000;
	margin:0 auto;
	}
#inner{
	position:absolute;
	top:150px;
	left:20px;
	width:200px;
	height:250px;
	background:url(hoge.png);
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="hoge.png", sizingMethod="scale");
	color:#fff;
	overflow:auto;
	}	
				
--></style>

<div id="sample">
<p><img src="hoge.jpg" alt="サンプル" /></p>
<div id="inner">
<p>ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。ここ、position:absolute;とoverflow:auto;、透過PNG使ってるところ。</p>
</div>
</div>

まず適当にダミーテキストを入れてFxで確認。問題ない。IE6.7、めずらしく問題ない。ただ普通にbackgroundとfilterの部分で２重に透過PNGが重なってるからIE7はちょっと背景画像が濃い。でもそこは全体からして大した問題ではないので完全スルー。

>>サンプルページ

でもやっぱり問題発生した

思惑通りと思っていたのにやっぱり最後でIE兄弟に泣かされた。上のサンプルの段階で問題なかったので、次にスクロール関連のチェック。内容量をスクロールする程度に増やして確認した。Fx問題ない。IE6、問題な・・・ウヘッ！

>>IE6.7で「ウヘッ！」ってなるサンプルページ

(n ▼ω▼ ) ＜スクロールバーが動かないんですけど。

動かぬスクロールバーはただのバー。イラっとしてIE6よりはちょっとだけ優秀なIE7で確認。

(n ▼ω▼ ) ＜IE7、お前かァァァァ！

なんのために存在してんの。かろうじてマウスをその辺りに持っていってホイールをグリグリしたら動く模様。何なん、これは。誰かたすけて。ちなみにOperaさん、Safariさん、Chromeさんは大丈夫。いい子。

犯人は透過PNG絡みとお見受けした

今までpositionとoverflowを組み合わせてもこんな事になった事はないから怪しいのはfilter。とりあえず上のサンプルからfilterを外したのがこれ。

>>filterを外したサンプルページ

IE6で透過PNGが背景として表示されなくなってるのは当然として、スクロールバー、IE6でも7でも問題ない。動かせる。やっぱり犯人はfilterだった。君なんかに頼った私がバカだったよ。今回初めて実務で使ってやろうと思ったのに・・・ご縁がなかったようだ。

filterを外した事でIE6はアレだけど、IE7では上の行のbackground:url(hoge.png);の指定がちゃんと効いてるから透過PNGも大丈夫。とりあえずfilterがダメならJavascriptがあるさ！と代替を考える。

Javascriptで半透明使えるようにしてみるよー

上でfilter外した時点でIE7はもう問題ないのでここからはIE6との闘い。

まず透過PNGでパっと頭に浮かんだのが前に書いたjQueryのプラグインのpngFix。そのサイトでもjQuery使ってるからちょうどいいやー的な発想で。

jquery.pngFix.jsを使ったケース

>>jquery.pngFix.js - PNG transparency for Windows IE 5.5 & 6 (IE PNG Fix)

>>jquery.pngFix.jsを使ったサンプルページ

パっと見た感じの見た目、無問題。スクロールバーにマウスを寄せると・・・
工エｴェｪ（´д｀）ｪェｴエ工工

（´д｀）ってホンマにそんな顔になった。pngFixを使ってもIE6がゆーこと聞いてくれませんでした。マイスホイールグリグリはいけるのにスクロールバーを感知してない。

IE7.jsを使ったケース

IE7でいけるんだからIE6をIE7に近づけてみようとIE7.jsを利用してみる事にした。

>>ie7-js - Google Code

>>IE7.jsを使ったサンプルページ

見た目ＯＫ。スクロールバー・・・やっぱりダメ。

もう少し粘ってみようと思ってIE6で透過PNGが使える系のJSはいろいろ試した。無理だった。JSに限らずなんかCSSの方でもいろいろ試した。無理だった。

結論

無理なもんは無理らしい。ということで、IE6を考えるならタイトルの通り、
(n ▼ω▼ ) ＜透過PNG + overflow = 混ぜるな危険

最後にもう1つ残念なお知らせ & まとめ

上ではpositionの話してるけど、これ、floatで同じ環境にしてみてもスクロールバー動かないんだな、これが。

そもそも根本的にpositionやfloatを使わないとしても透過PNG背景に入れてたら動かないじゃんって最後に気づいた。まさかそこの時点で前提が崩れてるとは・・・positionやfloatがまずいとばっかり思い込んでてスルーしてた。びっくり。

>>一応位置的な指定抜いたfliterバージョンサンプル
>>同じく位置的な指定を抜いたjsバージョンサンプル

つーことで最終的結論は、IE6ではボックス背景に透過PNGを使う場合、overflow:auto;は使えない。マウスホイールがあればかろうじて動くけど、ビミョー。

とりあえず、なんか自信なくした。煮詰まったので今日はこれ以上考えるのやめる。同じ方向しか考えが向いてない。こういうのってハマり出すとドツボにはまっていくし、案外寝て起きたら何か解消される事が多いし、明日の朝になったら特効薬が見つかるといいなぁ。

悲しい事にググっても同じ症状が出てこない。てか透過PNG背景にしてたらIE6でスクロールてきないなんて聞いたことないし。どっか凡ミスしてるのかな。無念なり。

追記　解決しました

コメント欄にてsmilkobutaさんにAlphaImageLoaderではなくAlphaを使うといいよとお教えいただきました。ご丁寧にサンプルまでありがとうございました！で、さっそく手元で試してみました。

>>サンプル08 Alpha版

仕組みとしては今回サンプルとして使っていたfilterでAlphaImageLoaderを利用するのではなく、Alphaを利用して半透明にしたimgを子ボックスの更に背面にレイヤーとしてかぶせて透過効果を実現するという形です。smilkobutaさん作ってくださったサンプルを元に少しだけ変更した点を書いておきますね。

まず、そのままだと他ブラウザで透過効果が得られないので、Alphaで半透明効果を狙う部分のソースを条件付きコメントでIE6のみに適応させるようにする。

<!--[if IE 6]>
<img src="http://redline.hippy.jp/images/081205_04.png" alt="" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);margin-top:150px;margin-left:20px;" />
<![endif]-->

CSS側ではモダンブラウザへは本来の透過PNGが背景として適応されるように子セレクタで指定。

#sample>#inner{
	background:url(http://redline.hippy.jp/images/081205_02.png);
	}

これでIE6の場合のみ別な処理をしてその他ブラウザには仕様に添った形で意図した見た目を提供できる、と。ほんとにありがとうございました！

余談なんですが、最近こうやってブログに書いてコメント等で教えて頂くケースが非常に多く、毎回メタルキング級の経験値稼がせていただいてます。本当に感謝してます。いろいろ教えてくださった方々、ありがとうございました。同時になんかいつも申し訳ないなぁとか思ったりもするんですが、なるべく人の役に立てそうな話を書けたらいいなーと思ってますので・・・来年度もこのブログを何卒宜しくお願いしますです。（別に年内はもう記事書かないって決めてるわけではないんですが、なんとなくそんな事を言う季節なので。１年が経つのは早いもんですなぁ。しみじみ）

2008年12月04日 23:19 | Red | パーマリンク