CSS3のグラデーションサイズを小さくして敷きつめ過ぎるとFirefoxがクラッシュします

弊社の井上さんからFirefoxで見るとフリーズします、と言われまして「は?なにこれ?」って思ったのですが、タイトルの通りCSS3のグラデーションサイズを小さくして body 要素全体なんかに敷きつめてやるとFirefoxがクラッシュします。

グラデーションを敷きつめまくっている時のスクリーンショット

以前の敷きつめまくっている頃のスクリーンショットを貼りましたが、この中で category の各リンクをよーく見てみると背景に薄いストライプ状のテクスチャみたいのが見えるかと思います。こいつがグラデーションです。
また、白枠の外側、つまりここが body 要素で、ここにもうっすらとストライプ状のテクスチャみたいのがあります。

ということで、以下のような CSS を書いておけば見事 Firefox をクラッシュできますのでお試しください。

body {
	background:-moz-linear-gradient(left, transparent 50%,#f6f6f6 50%,#f6f6f6 100%),-moz-linear-gradient(top, transparent 50%,#f6f6f6 50%,#f6f6f6 100%);
	background-size: 2px 2px;
}

comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

TrackBack URL :