POPSブログ

CSS3 IE9 border-radius と hidden でバグについて

170

  Category:  css32012/11/20 pops 

CSS3で「角丸陰影処理」(border-radius box-shadow)した要素の中に文字を入れて、文字にフィルター処理(filter shadow)をすると、「IE9」border-radius hidden が原因で、文字のフィルターが壊れる現象がおきた。少し調べてみた。

 

CSS3 IE9 border-radius と hidden でバグについて


border-radius と hidden の相乗効果バグ?

明らかに「IE9」のバグであろう。同一階層(要素)に border-radius で角丸処理をする。文字には「IE9」で text-shadow がサポートされていないのでIE独自の filter.Shadow を処理した。
問題は、jqueryでアニメ処理するため必要にせまられ、overflow:hidden を設定したら、IE9で文字のフィルターが壊れる現象がおきた。図のような状況でこれは問題である。ネットで調べても情報は無い。今後のこともあるのでテストしながら調べてみたレポートである。


そもそもの原因は「IE9」にCSS3 text-shadow が実装されず、従来から問題の多い filter.Shadow を使用せざるを得ないのが一因である。hidden 設定をしなければバグは出ないが、どうしても hidden 設定しなければなら無い時もある。


解決するには、HTML構造を変えるしか方法はないのか?。私の「頭のバグ」で答えは出ない!。


説明図


1.※ 1 - 4 番までは border-radius box-shadow の処理したサンプルである。
(IE7.8には従来のfilter.Shadowを使用した、勿論角丸には出来ない)
2.※ 5 番は角丸だけの処理のところに、間違って、不要な filter.Shadow 陰影処理を施してしまった時の状態である。完全に汚い、見れる状態にはない。(IE9以外では見えないので判らない恐れあり)
3.※ 6 番は内部に透明度設定( filter:alpha )を処理したBOX要素を入れて、影響をしらべた。
4.※ 7 番は文字に図形 ▼ を入れた場合の陰影の状態をしらべた。(チョットこわれる)
5.※ 中の背景画像はPNG32画像である。filter処理はしていないので。影響は無いようである。


CSS3角丸 Shadow処理のサンプルと、「IE9」での振舞いのキャプチャー画像

「IE9」のみの現象です。他のブラウザでは正常に表示されます。


「IE9」の方は、下の「実際サンプルBOX」を参照ください、サンプル下部で hidden の操作ができます。「IE9」以外の方は残念ながらバグは出ませんので「キャプチャー図」を参照ください。


実際サンプルBOX IE9 overflow:visible IE9 タイトル陰影なし IE9 overflow:hidden IE78 通常表示画像


タイトル陰影の切替 : SHADOW 有り SHADOW 無し (初期はSHADOW有り)

OVERFLOWの切替 : VISIBLE HIDDEN (初期はVISIBLE)

ベース背景色の切替 :                    

サンプル背景色の切替 :                    


状況と推測


今まで角丸処理には画像を使用してきましたが、CSS3に移行しようと思っていた矢先なので困ることです、今後のことを考えてテストして見た結果が上の図である。
border-radius hidden の処理を同一階層で処理すると、その中の文字のフィルターが壊れる。(filter Shadow の自動で処理されているような padding などが原因なのでしょうか)
フィルター相互のバグであると思いますが、困ったことです。アニメ処理などでは結構 hidden 設定を使用しますので、回避するには文字部分を影響の無い階層に分離するほか方法は無いようです。


説明図

 

● HTMLの構造を変える

構造をかえて下のように分離します。現時点では、私としてこの方法しか解決の道は無い。

親に、border-radius overflow:hidden を処理。子の層にテキストを置き、テキストに filter:progid:DXImageTransform.Microsoft.Shadow()処理をすれば再現できます。


○ 元の構造 (hidden 設定、IE9でバグがでます)



#sample-1に角丸陰影処理。その中にフィルター処理されたテキストがあります。


<div id="sample-1">
	<a href="javascript:void(0);"><h3>会社案内</h3></a>
</div>

margin padding a要素なども影響があるのかと、単純なBOXでテストしても結果は同じ。border-radius overflow:hidden をあわせれば 子要素のfilter は壊れる。(ぼかしなどのfilterの種類によっては正常)


○ 新しい構造 (中の階層にhidden設定、IE9でバグが出ません)



中の botom-boxクラスが新しい角丸陰影処理の階層になり、タイトルとは分離されます。#sample-2はラップになります。アニメ処理の都合などでは尚一層複雑になることもあります。


<div class="sample-box">
	<div class="botom-box drawshadows"></div>
	<div class="title-box"><a href="javascript:void(0);"><h3>会社案内</h3></a></div>
</div>

ここでは、botom-boxクラスに角丸陰影処理、hidden設定、タイトルの入るtitle-boxクラスに影響が無いように position:absolute で調整して組み立てる。面倒なことですが。


CSSの例


/* sample-1 */
#sample-1 {
	display:block;
	position:relative;
	width:110px;
	height:60px;
	margin:0;
	padding:0;
	text-align:center;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	box-shadow: 0 0 6px #333;
	-moz-box-shadow: 0 0 8px #333;
	-webkit-box-shadow: 0 0 8px #333;
	background-color:#F5F5F5;
	overflow:hidden;
}
#sample-1 a {
	display:inline-block;
	margin:0;
	padding:0;
	text-decoration:none;
}
#sample-1 h3 {
	display:block;
	width:auto;
	height:20px;
	margin-top:10px;
	padding:0 5px;
	line-height:20px;
	font-size:12px;
	font-weight:bold;
	color:#E0E0E0;
	text-shadow:1px 1px 4px #000000;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=3,enabled=true);
	cursor:pointer;/*default*/
}
/* sample-2 */
#sample-2 {
	display:block;
	position:relative;
	width:110px;
	height:60px;
	margin:0;
	padding:0;
}
#sample-2 .botom-box {
	display:block;
	position:absolute;
	top:0;left:0;
	width:110px;
	height:60px;
	margin:0;
	padding:0;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	box-shadow: 0 0 6px #333;
	-moz-box-shadow: 0 0 8px #333;
	-webkit-box-shadow: 0 0 8px #333;
	background-color:#F5F5F5;
	overflow:hidden;
}
#sample-2 .title-box {
	display:block;
	position:absolute;
	top:0;left:0;
	width:110px;
	height:60px;
	margin:0;
	padding:0;
	text-align:center;
}
#sample-2 .title-box a {
	display:inline-block;
	margin:0;
	padding:0;
	text-decoration:none;
}
#sample-2 .title-box h3 {
	display:block;
	width:auto;
	height:20px;
	margin-top:10px;
	padding:0 5px;
	line-height:20px;
	font-size:12px;
	font-weight:bold;
	color:#E0E0E0;
	text-align:center;
	text-shadow:1px 1px 4px #000000;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=3,enabled=true);
	cursor:pointer;/*default*/
}


● 6番目の表示結果に注目

IE独自のフイルターのバグの結果です。やはり壊れますが、ある程度は旨くすれば回避できそうにも思われますが、構造あるいは、処理する場所、IEバージョンにより振る舞いが違いますので考えないほうが賢明です。
構造は次ぎの通りですが。初期状態でhidden処理無しなので、中の階層にも角丸処理、border-radiusをしています。hiddenでは右の食み出しは取れる。IEでも見た目が全然違う。
例では、一応背景は赤に塗り、透明度 40 にしてあります。フイルターのバグの多さを考えるとフイルターで治す事は余り考えないほうが得かも、、

この挙動では、アルファフィルター使用の場合は気を付けないといかんナ。



<div>
	<div><a href="javascript:void(0);"><h3>会社案内</h3></a></div>
</div>

● 文字に陰影処理したPNG32画像を使用する

フィルターを使用せずに、陰影をつけたPNG32画像を使用すれば問題は無いが大変面倒である。画像加工の出来ない人も有ろう。


● Blurフィルターを使用する

IE9の時だけ文字を2段重ねにして、下の文字にBlurフィルターを処理する。一応壊れないのでいいと思うが面倒すぎるもはなはだしい。正月には3段重ねにして「ミカン」でも載せとく。


● border-radius設定のボックスに、誤って陰影フィルターをかけてしまうと「IE9」では、、

5番の例は、角丸 (border-radius) だけの処理をしようとして、誤って陰影フィルターを処理した例です。陰影が完全に壊れるので注意です。(但し、IE9だけでしか起こりません。他のブラウザでは見えませんので、、IE7.8では陰影フィルターが普通に機能しますので壊れることはありません)
IE9の場合BOX陰影処理は、box-shadow になります、陰影フィルターがあっても box-shadow が優先されるようです。但し box-shadow 記述が無い場合はフィルターがかってしまいますから、結果として上の例のようになります。
昔から、IE独自のフィルターは同時に処理すると壊れることが多い。またIEのバージョンによっても「振る舞い」が違うし「処理して見ないと状況が判らない」面がある。


● 図形文字にフィルターを処理すると品質が良くないようです。

7番の例は拡大するとわかりますが、陰影以外の色が入ります。処理の甘さか、文字の指定が悪いのか調べてはいませんが、マア、余り気にする部分でもありません。


● 最後に

前の記事で、バグが出て少し一人で大騒ぎした。 忘れると困るのでメモしておく。
「IE9」は1ヶ月前に入れたばかりで余り判らない。「WindowsXP」を使用していますからIE9は導入できなかった。IE9での確認のためにショウガナク「Windows7」をいれた、作業効率が悪いので「Windows7」は使う気になれないナ、確認用でしかない。
IEのフイルターのバグに困り今まではほとんど画像図形で処理して、フイルターは避けてきた。CSS3にの移行の準備として少しやり始めただけである。
「IE9」もまだまだ「IE様、健在!」である。IE9 border-radius と hidden には要注意。


以上です。

 


[ この記事のURL ]


タグ:CSS , css3 , memo

 

ブログ記事一覧

年別アーカイブ一覧



[1]