first-letter×letter-spacingでSafari4がクラッシュ?

レスポンシブウェブサイトを制作中、MacのSafari4.1.3にてサイトを確認したらクラッシュする…。

(´;ω;`)なんでよ

低スペックMacのせい?
と思ったものの画像やソースの容量はかなり抑えたし、しかも他の重いサイトは表示される。これはソースに問題ありと見てエラー箇所の洗い出し。

JSの動作、記述ミスなどチェック

jqueryを幾つか設定しているのでまずはそこから確認。

  1. jqueryを一ずつ外して動作確認
  2. 別ファイルでjqueryをセットし個別に動作確認
  3. JS・HTML・CSSの記述ミスがないか確認
  4. JS・HTML・CSSの文字コードを統一させる

が、なんの問題もないし変わらない。

HTMLを部分的に削除して問題箇所を探す

ヘッダー、メインコンテンツ、サイド、フッターなど大まかにHTML部分を削除⇔追加を繰り返しながらSafariで動作確認していくと・・ある特定箇所を削除したらクラッシュしないことが分かった。

HTMLソースには記述ミスも見当たらないので、悪さしているのはCSSおまえか!ってことで影響がありそうなのを片っ端から削除しながら動作確認してたら…見つけました。

原因はCSSの“first-letter”だった。

以下のliリストに設定していたfirst-letterを削除したらクラッシュすることなく表示された。

#item li:first-letter{
 letter-spacing: 0.15em;
 }

これかぁ~…なんでこんなのが…
原因はよくわかりませんが、今回のはそれほど重要な装飾ではないため削除。

でもfirst-letterは、要素の最初の文字にスタイルを適用するという痒いところに手が届く的なCSS擬似要素。なのでfirst-letter自体がアウトなのかついでにチェック。
※letter-spacingは他要素に設定していて問題ないのでスルー。

▼装飾内容を変えてみたがクラッシュなし

#item li:first-letter{
 font-size: 120%;
 }

よってfirst-letter×letter-spacingの組み合わせがよくない?ということのよう。ほか装飾との組み合わせにも問題があるかもしれないのでfirst-letter使用時は要注意。

※Safari4.1.3での動作確認、最新版Safariでは未確認。

コメントを残す

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