swiper.jsとline-clampとiOSで沼った話

0. はじめに

• -webkit-line-clamp がiOSのSafariだけ効かない問題の解決方法になります
• line-clampが効かない原因はいくつかネットに上がっていますが、今回の原因は swiper.js と iOSの Safari に起因するものでした
• HTMLとcssの動きを説明しながら、解決方法を記載したいと思います

1. やりたかったこと

• 文章が4行以上になった場合、3行に表示行数を制限する
• 最後の文字は「･･･」に置き換える

2. 問題発生

• スマホ版のみの対応だったため、AndroidとiOSで動作確認しました
• Androidは期待値通りの表示がされていることを確認
• しかし、iOSの実機で動作確認してみると、 swiper.js を使っているところだけ、表示行数が制限されていなかったのです

上記の問題は、更新ボタンを押すと表示行数の制限がされる事象も同時に発生していました
この問題は他でも取り上げられていました(参考記事3)

3. 原因

• DOMの変更後はスタイルの再計算等が行われ、CSSが適用されるはずです
• 今回のiOSのSafariではCSSは適用されなかったため、swiper.js と iOSのSafari と -webkit-line-clamp の相性が良くなかったことが原因となります(違ったらごめんなさい)

4. 解決方法

• できないで終わるのはダサいので、更新ボタンを押すと表示行数が制限されるところに注目して、解決方法を考えます

4.1. ブラウザの再描画について

ブラウザの再描画は、基本的には、DOM, HTML, CSSの仕様に準拠する範囲で不要な処理をしないの積み重ねになります
大まかなフローは下記の通りです

1. DOM変更
2. スタイル計算
3. レイアウト
4. ペイント
5. コンポジション

DOM変更を行えば再描画が発生し、CSSが適用され表示行数が制限されるはずです

4.2. DOM変更

• 表示行数を制限したい要素のクラス名を削除・追加することでDOM変更し、強制的に再描画フローを発生させます
• jQueryによるサンプルコード

  $(window).on('load', function() {
    var description = $('.description .line-clamp3');
    description.removeClass('.line-clamp3');
    description.addClass('.line-clamp3');
  });
  

• 注意：jQueryの ready では、まだ描画が完了していないため、描画完了後の load で処理を実行してください

参考記事

1. CSS : 「line-clamp」 で表示行数を制御する
2. slickスライダー内の文字の行数が更新ボタンを押した時だけ制御できなくなる
3. DOMが書き換わった後ブラウザはどのように再描画していますか？
4. 【jQuery】処理実行タイミング $(document).readyと$(window).load