iOS でサイズ 0 の要素に box-shadow をつける

iOS ではサイズ 0 の要素に box-shadow をつけても表示されないようです。

html
1<!doctype html>
2
3<div style="
4    margin: 100px;
5    width: 500px;
6    height: 0;
7    box-shadow: 0 0 5px 3px red;
8"></div>

上記 HTML を Windows の Chrome 等で開くと、ぼやっとした赤色の横線が見えるかと思います。
iOS で開くと何も表示されません。

バグなのか未対応の仕様なのかは不明ですが、 iOS でも同等の表示をしたいです。
回避策や Polyfill 等ありますでしょうか？

Lhankor_Mhy

2021/04/23 06:56

回答とは直接関係ないですが、当方の環境で試してみたところ、 height: 0.015625px を下回ると消えるようでした。 2**-6 なので、2進数関連でしょうか？

行動規範の内容に同意します

回答1件

自己解決

@Lhankor_Mhy さんの書き込みを元に回避策がみつかりました。
ありがとうございます。

回避策: height: 0.016px に設定する

0.5px 程度では iOS では間に白い線が残り、 0.1px まで小さくすると間に線は見えずぼやけた表示にできました。
ただ、これだと Windows の Chrome ではまだ間に白い線が残ります。
更に小さくし、 0.016px とすると Windows の Chrome でも間の白い線が消えました。

0px に比べると色が少し薄くなりますが、それは色の設定等でカバーします。

ズーム表示した場合や Firefox 等その他ブラウザで動くかは未確認ですが、私が必要だった Windows の Chrome と iOS の表示を揃えることができたので解決とします。

投稿2021/04/23 08:47

lazex

総合スコア604