ワナってほどでもないですけど、久しぶりに困ったので。
やっぱりCssにしろ何にせよ概念レベルはもちろん、きっちり実装レベルで理解できてないとどっかで困るみたい。
最近はそりゃあ検索すればスグわかるってのもあるけど、それでもやっぱり知ってたいし、知りたい。
困ったこと
- タップするとモーダルが開く
- そのモーダルはリストのUIで、縦に数行ある
- 各通知はタップするとタップ時のスタイルが反映されるようCssを組んである
- このモーダルのタイトルは画像を使っていて、テキストノードはtext-indent: -9999pxを指定
こういう条件のとき。
タップ時のスタイル反映がやけに遅い
タップ時のスタイルはJavaScriptでclassを付与するようにしてて、グラデーションの色合いや影をつけてます。
で、そのタップ時の挙動がとにかく遅い。
.list { /* グラデーション薄い版 */ } .list-tapped /* グラデーション濃い版 */
背景色の着色が、画面右から左方向に反映されていく様が目で追えるくらい遅いｗ
transitionでも間違って設定したかと思うほどに。
犯人はtext-indent時のoverflow不在
デバッグとしては、
- JavaScriptのクラスの付与がここだけ遅い？：遅くなる理由がない＋他は問題ないので却下
- Cssの指定(グラデーション)におかしいのがある？：単色でも同じく遅いので、スタイルの問題ではなさそう
- 関係ない要素も含め、全部を1つずつ削除して力ずくで確認：犯人発見(リスト関係な・・・)
全く関係ないと思っていたタイトルを削除したら、あっさり早くなりました。
どうやらtext-indentで左方向に思い切り広がった要素のせいで、スタイルの反映に遅れが出ていた模様。
そりゃあ300倍の要素やもんね・・。
.img-header { text-indent: -9999px; overflow: hidden;/* できるならセットで */ }
これでひとまずは解決。
最近のテキスト→画像置換なら
そんでコレを解決したころに思い出したのがこの記事。
PC向けなりタブレット(というか初代iPad)なりターゲットデバイスが決まってれば、どうすべきか決めれそうなもんですけどねー。
いわゆるスマートフォン向けだと、どういうのが最適なのかしら。
- 9999pxを100%にしたところで、結局overflow: hiddenで消さなきゃいけないっていう。
アクセシビリティの観点を置いておくとして、パフォーマンス的にはどっちが良いのかしら。
ちなみにコレ、iOS5だけ如実に遅かったんですよね。
iOS6やAndroid2.2↑、PCなどなど問題なく動作する中、iOS5だけ・・・！