Home > Mac > MacSafariでレイヤーが崩れてしまう

MacSafariでレイヤーが崩れてしまう

  • 2008-05-28 (水)
  • Mac

Mac版のSafariでLightBox風なレイヤーを表示したときに苦労したお話。

画面全体を薄暗くするCSSコードはこんな感じ。

.layerBoxFrame {
	background: #000000 none repeat scroll 0%;
	opacity: 0.2; /* Safari, Opera */
	-moz-opacity:0.20; /* FireFox */
	filter: alpha(opacity=20); /* IE */
	z-index: 30;
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	position:absolute;
	top: 0px;
	left: 0px;
}

んでもってLightBox風なレイヤーはこんな感じ

.layerBoxContents {
	background: #FFFFFF none repeat scroll 0%;
	padding: 5px;
	margin: 5px;
	position:absolute;
	top: 0px;
	left: 0px;
	width: 580px;
	height: 570px;
	border: 2px solid #278FD9;
	z-index: 31;
}

IEでbody要素に対して以下が必要

/* IE用 */
body {
	_height: 100%;
}

.layerBoxFrameクラスのほうでstyle.positionをabsoluteにしているが、この場合にMac版のSafari3.1でLightBox風のレイヤーのほうがスクロールしたときに細切れになる現象にハマってしまった。

結果的にSafariの場合にstyle.positionをfixedにしたら解決したのだが、ちょっと面倒なのがSafariのバージョンも今は3.1まで上がっているので、うまくMac版のSafariだけに対応するCSSハックが見つからなかったことだ。
もしかしたらあるのかもしれないが、いろいろ試した結果うまくいかなかった。

なのでJavaScript側でSafariだった場合にfixedにする処理を入れた。これはWindows版のSafariにも適用されているが特に問題なし。

if (safariVersionChecker() > 1) {
      $(this.boxLayer).style.position = "fixed";
}
//Safariバージョンチェッカー
function safariVersionChecker() {
      var ua = navigator.userAgent;
      var num = ua.match(new RegExp("Safari/[0-9]{1,4}\.[0-9]{1,2}"));
      return (num == null ) ?  - 1 : parseFloat(String(num).replace("Safari/", ""));
}

ちなみにIE6.0ではfixedは対応していないので、気をつけるようにっ!

ボクは普段はMac OS Xを使って遊んでいるので、やけにMac版のSafariに気を使っているのは言うまでもないw

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1020
Listed below are links to weblogs that reference
MacSafariでレイヤーが崩れてしまう from HouseTect, JavaScriptな情報をあなたに

Home > Mac > MacSafariでレイヤーが崩れてしまう

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top