とある Android アプリ案件で WebView のスクロールが重たい報告があがってきました。

スクロールしようとしても Android はスムーズにいかず、反応が鈍い感じ..
同じ端末のデフォルトブラウザ(Web)や iOS は特に問題なしで、Android の WebView のみ顕著に重たい状況でした。

JavaScript もそれなりに入っているページだったので、
最初は JavaScript のリファクタリングを頑張ってましたが、
頑張ってはみたもののそこまでの改善は見られず..

また大きい画像もあったのでレンダリング処理に時間かかってるのかなという事で、
最適な画像を準備するようにしても、あまり変わらず..

困り果てて調べていたところ、CSS の可能性が。

フロントエンドチューニングの箇条殴り書き ::ハブろぐ

[CSS] border-radius と box-shadow を組み合わせると、それぞれ単体でのスタイルより５倍重たい！？

border-radius と box-shadow の組み合わせ。
どうも今回のケースはこれが原因のようでした。
box-shadow を無くしたり、border-radiusを角丸の画像(懐かしいやり方)に変えたりしたところ、かなり改善されました。

これらの CSS3 系プロパティが重たいというのは聞いてはいたが、ここまでとは。
特に border-radius と box-shadow の組み合わせは、よくありそうなケースなので注意が必要ですね。
勉強になりました。