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に気を使っているのは言うまでもないｗ

【関連する記事】

Comments:0

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, JavaScripter Blog

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

作ったもの

キングボンビーがサイトを侵略する？jQuery Plugin - kingbonbi.js作りました

なんかものが落ちるjQuery Plugin - JDropper作りました

RSS Feeds

Search

Recent Entries

Tag cloud

Categories

月別アーカイブ

このブログについて

author：hisasann

description：フリーランスで仕事しているプログラマーです。
最近はJavaScript、Rails、Java（Struts+Spring）なんかをいろいろといじっています。
今やってみたいのはFlashやActionScriptかな。
また誕生して半年になる子供の成長を見守るパパでもあります。

日々の日記 :

Hisasann’s Log@はてダ

他に運営しているブログ：

利用しているWebサービス :

最近のコメント

Powered by

Page Top