🧊

text-indentに潜むワナ

ワナってほどでもないですけど、久しぶりに困ったので。
やっぱりCssにしろ何にせよ概念レベルはもちろん、きっちり実装レベルで理解できてないとどっかで困るみたい。

最近はそりゃあ検索すればスグわかるってのもあるけど、それでもやっぱり知ってたいし、知りたい。

困ったこと

  • タップするとモーダルが開く
  • そのモーダルはリストのUIで、縦に数行ある
  • 各通知はタップするとタップ時のスタイルが反映されるようCssを組んである
  • このモーダルのタイトルは画像を使っていて、テキストノードはtext-indent: -9999pxを指定

こういう条件のとき。

タップ時のスタイル反映がやけに遅い

タップ時のスタイルはJavaScriptでclassを付与するようにしてて、グラデーションの色合いや影をつけてます。
で、そのタップ時の挙動がとにかく遅い。

.list {
/* グラデーション薄い版 */
}
.list-tapped
/* グラデーション濃い版 */

背景色の着色が、画面右から左方向に反映されていく様が目で追えるくらい遅いw
transitionでも間違って設定したかと思うほどに。

犯人はtext-indent時のoverflow不在

デバッグとしては、

  • JavaScriptのクラスの付与がここだけ遅い?:遅くなる理由がない+他は問題ないので却下
  • Cssの指定(グラデーション)におかしいのがある?:単色でも同じく遅いので、スタイルの問題ではなさそう
  • 関係ない要素も含め、全部を1つずつ削除して力ずくで確認:犯人発見(リスト関係な・・・)

全く関係ないと思っていたタイトルを削除したら、あっさり早くなりました。

どうやらtext-indentで左方向に思い切り広がった要素のせいで、スタイルの反映に遅れが出ていた模様。
そりゃあ300倍の要素やもんね・・。

.img-header {
  text-indent: -9999px;
  overflow: hidden;/* できるならセットで */
}

これでひとまずは解決。

最近のテキスト→画像置換なら

そんでコレを解決したころに思い出したのがこの記事。

参考:画像置換のあれへの補足 – terkel.jp

PC向けなりタブレット(というか初代iPad)なりターゲットデバイスが決まってれば、どうすべきか決めれそうなもんですけどねー。
いわゆるスマートフォン向けだと、どういうのが最適なのかしら。

  • 9999pxを100%にしたところで、結局overflow: hiddenで消さなきゃいけないっていう。

アクセシビリティの観点を置いておくとして、パフォーマンス的にはどっちが良いのかしら。

ちなみにコレ、iOS5だけ如実に遅かったんですよね。
iOS6やAndroid2.2↑、PCなどなど問題なく動作する中、iOS5だけ・・・!