モノトーンの伝説日記

Apex Legends, Splatoon, Programming, and so on...

WebKit ベース (Safari) ブラウザーで「device-pixel-ratio: 3」のデバイスで,table の td 要素に対する小数点境界線が正しく表示されない問題

 整理しつつ,問題について。公式に投げた方がいいのですかね?

1. 再現環境

  • iPhone 12 mini with iOS 14.4 の Safari
  • macOS Big Sur 11.2 の Safari 14.0.3 のレスポンシブ・デザイン・モードでの device-pixel-ratio: 3 をシミュレートした環境

以上の 2 つで確認しています。

2. 不思議な事案

 一つだけでも条件がずれれば再現せず,

  1. そもそも div 要素などでは再現しないこと
  2. device-pixel-ratio: 2 の環境では 0.5px が問題なく表示されること

という,もともと iPhone SE 1G を使っていたので,気づいていなかった可能性もありますが……

3. 再現条件とテストコード

 table の td 要素に対して,

  • 区間 0 〜 0.6718749 → 表示されない
  • 区間 0.671875 〜 ∞ → 表示される

See the Pen Safari 300% device bug test by monotone (@mntone) on CodePen.

f:id:mntone:20210205131535p:plainf:id:mntone:20210205131606p:plain
レスポンシブ・デザイン・モードでの結果

まとめ

 報告案件なのかわからないですが……

 数値的に 0.671875 に 3 をかけると,2.015625 になるので,小数点以下の境界線の太さは 2px を超える範囲でしか表示されない,ただし整数の場合は問題なく通る,といった感じなのかな? わかりませんが,WebKit のコード読んでないので。