はじめに
こんにちは！ささかまです！
前回のアドベントカレンダーに続き２回目の記事になります！
今回は、iPhoneで見たときにtableタグで作った表のborderが内側だけ太くなってしまう現象の原因と解決策についてまとめていきたいと思います！
問題が発生した状況
今回の問題が発生してしまった表は下のものになります。
一番左の列が固定で、横にスクロールできる表になっています。
この問題はiPhone(iOS 17.2.1)のSafari、Chrome、Firefoxで確認することができました。
See the Pen 初期状態 by 佐々木悠真 (@ixeujzbc-the-solid) on CodePen.
PCで見る分には問題ないのですがiPhoneで見ると外枠のborderよりも内側のborderの方が若干太く見えてしまいます。
また、左端の列をstickyで固定しスクロールすると、固定したセル両端のborderも消えてしまいました。こちらも直していきます。
解決方法
stickyで固定した時に左右のborderが消える（サブクエスト）
まず最初にstickyで固定した時に、固定したセルのborderが消えてしまう問題を解決していきたいと思います。
こちらを修正するのは簡単で、親要素であるtableタグにborder-collapse:separate;を指定してあげることで解決できます。
border-collapseとはtable内のセルが境界を共有するか分離するかを設定するプロパティです。
border-collapse: collapse; /*隣接するセルは境界線を共有します*/
border-collapse: separate; /*隣接するセルは個別で境界線を持ちます*/
border-collapse: collapse;を指定してしまうと境界線が結合されて、スクロールしたときに持っていかれてしまうみたいです。
See the Pen Untitled by 佐々木悠真 (@ixeujzbc-the-solid) on CodePen.
separateを指定したことで左右のborderが消えずに残ってくるようになりました。
collapseによって共有されていた境界線が個別になったので、全方向にかけていたborderを下と右にのみ指定してborderが被らないように変更しました。
iPhoneで見ると内側のborderが太くなる（メインクエスト）
次に本題のiPhoneで見たときに内側のborderが太くなってしまう問題を解決していきます。
と思ったのですが、先ほど固定したセルのborderが消えてしまう問題を解消するためにcollapseからseparateに変更したらこちらも直っていました。
修正した部分はborder-collapseとborderの位置のみなのでこれが原因だと考えます。
position: stickyで固定していたのが原因なのかなとも思ったので、一度固定を解除して、原因を探ってみます。
See the Pen collapse by 佐々木悠真 (@ixeujzbc-the-solid) on CodePen.
iPhoneで見ると内側のborderが太くなっています。
position: stickyは関係なさそうです。やはりborderが太くなってしまう原因はborder-collapseが原因なのではないかなとおもいます。
敗北
色々調べてみたのですが、border-collapseがiPhoneでのみ見え方が変わるという記事は見つけられませんでした。自分一人の力では残念ながら原因を突き止めることはできないと思い、アドバイスをいただきました。どうやらデバイスピクセル比というものが関係しているかもしれないとのことでした。
デバイスピクセル比
デバイスピクセル比とはCSS上の1pxを表示させるのに使われているピクセル数の比率のことです。
例えばCSS上で2pxを指定したborderを、デバイスピクセル比が2の端末で見ると２*２＝４で4pxになります。
上記を踏まえた上で再度表を確認してみます。
仮説
下画像はiPhone 11 Pro(デバイスピクセル比3)で表を見た時のものになります。
CSS上でborderの太さは全て１pxを指定しています。
外側の青borderは3px幅になっています。こちらはデバイスピクセル比が3のため特に問題はありません。問題は内側の青borderです。こちらの太さは4pxとなっています。よくみると赤と青のborderの境目も揃っておらず、青が1px分はみ出てしまっています。
どうやらborder-collapseのレンダリング計算結果には多少の誤差があるようで、その誤差とデバイスピクセル比が掛け合わさって今回の内側だけ太くなってしまう現象が起きたと考えられます。
以上のことから仮説を立てると
- 内側のborderのみ
border-collapse: collapse;で境界線を共有に - しかしそこで本来1pxになるはずだったborderの太さが誤差で1.4px?(正確な値はわからないので例です。)になってしまう
- PCなどのデバイスピクセル比が1,2の端末では
1*1.4=1.4,2*1.4=2.8となるため外側のborderと差が出ない - デバイスピクセル比が3の端末では
3*1.4=4.2となる -
border-collapse: collapse;の影響を受けない外側のborderはデバイスピクセル比により3px、内側のborderは先ほどの計算から4px - デバイスピクセル比が3のiPhone端末でのみ内側と外側で1pxの誤差が出てしまう
デバイスピクセル比が異なるいくつかの端末でどのような表示になるか確認してみました。
検証結果
| デバイスピクセル比 | 内側borderの太さ | |
|---|---|---|
| iPhone 13 Pro | 3 | 太くなる |
| iPhone 13 | 3 | 太くなる |
| iPhone 11 Pro | 3 | 太くなる |
| iPhone 7 | 2 | 外側と同じ |
| Pixel 7a | 2.625 | 外側と同じ |
デバイスピクセル比が3のものだけ内側のborderが太くなっていました。
border-collapse: collapse;とデバイスピクセル比が原因という仮説は合っていそうです。
まとめ
今回はiPhoneで内側borderが太くなってしまう現象についてまとめてみました。
大元の原因としては、border-collapseの計算結果に誤差が生まれた事になるので、解決策としてはやはりborder-collapse: separate;を指定して、それぞれborderを当てるのがいいのかなと思います。
デバイスピクセル比の存在やborder-collapseのレンダリング計算結果には多少の誤差があることなど、初めて知る知識が多く、かなり勉強になりました！
参考サイト
最後に参考にさせていただいたサイトを載せておきます。最後まで見ていただきありがとうございました！