CANVAS要素をdisplay:block;したときの周囲のfloatされた要素との重なり順が、ChromeとFirefoxとで違います

CANVAS要素をdisplay:block;したときの周囲のfloatされた要素との重なり順が、ChromeとFirefoxとで違います。なぜこのような違いが出ますか？どっちが正解とかありますか？ユーザ数の多いほうが正解ですか？

スクリーンショット

Chrome

Firefox

確認用

ページ

https://floatui.netlify.app/

コード

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title></title>
6    <style>
7      body > div {
8        display: inline-block;
9        width: 120px;
10      }
11      .wrapper {
12        width: 80px;
13        height: 80px;
14        background: silver;
15      }
16      .float1,
17      .float2,
18      .parent {
19        width: 20px;
20        height: 20px;
21      }
22      .child {
23        margin: 0;
24        padding: 0;
25        border: 0 none;
26        width: 40px;
27        height: 100%;
28        background: yellow;
29      }
30      .float1,
31      .float2 {
32        float: left;
33      }
34      .float1 {
35        background: red;
36      }
37      .float2 {
38        background: blue;
39      }
40      .parent {
41        background: green;
42      }
43    </style>
44  </head>
45  <body>
46    <div>
47      <div>div</div>
48      <div>default</div>
49      <div class="wrapper">
50        <div class="float1"></div>
51        <div class="parent"><div class="child"></div></div>
52        <div class="float2"></div>
53      </div>
54      <div>block</div>
55      <div class="wrapper">
56        <div class="float1"></div>
57        <div class="parent"><div class="child" style="display: block;"></div></div>
58        <div class="float2"></div>
59      </div>
60      <div>inline-block</div>
61        <div class="wrapper">
62        <div class="float1"></div>
63        <div class="parent"><div class="child" style="display: inline-block;"></div></div>
64        <div class="float2"></div>
65      </div>
66    </div>
67    <div>
68      <div>p</div>
69      <div>default</div>
70      <div class="wrapper">
71        <div class="float1"></div>
72        <div class="parent"><p class="child"></p></div>
73        <div class="float2"></div>
74      </div>
75      <div>block</div>
76      <div class="wrapper">
77        <div class="float1"></div>
78        <div class="parent"><p class="child" style="display: block;"></p></div>
79        <div class="float2"></div>
80      </div>
81      <div>inline-block</div>
82      <div class="wrapper">
83        <div class="float1"></div>
84        <div class="parent"><p class="child" style="display: inline-block;"></p></div>
85        <div class="float2"></div>
86      </div>
87    </div>
88    <div>
89      <div>span</div>
90      <div>default</div>
91      <div class="wrapper">
92        <div class="float1"></div>
93        <div class="parent"><span class="child"></span></div>
94        <div class="float2"></div>
95      </div>
96      <div>block</div>
97      <div class="wrapper">
98        <div class="float1"></div>
99        <div class="parent"><span class="child" style="display: block;"></span></div>
100        <div class="float2"></div>
101      </div>
102      <div>inline-block</div>
103      <div class="wrapper">
104        <div class="float1"></div>
105        <div class="parent"><span class="child" style="display: inline-block;"></span></div>
106        <div class="float2"></div>
107      </div>
108    </div>
109    <div>
110      <div>canvas</div>
111      <div>default</div>
112      <div class="wrapper">
113        <div class="float1"></div>
114        <div class="parent"><canvas class="child"></canvas></div>
115        <div class="float2"></div>
116      </div>
117      <div>block</div>
118      <div class="wrapper">
119        <div class="float1"></div>
120        <div class="parent"><canvas class="child" style="display: block;"></canvas></div>
121        <div class="float2"></div>
122      </div>
123      <div>inline-block</div>
124      <div class="wrapper">
125        <div class="float1"></div>
126        <div class="parent"><canvas class="child" style="display: inline-block;"></canvas></div>
127        <div class="float2"></div>
128      </div>
129    </div>
130    <div>
131      <div>img</div>
132      <div>default</div>
133      <div class="wrapper">
134        <div class="float1"></div>
135        <div class="parent"><img class="child" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII="></div>
136        <div class="float2"></div>
137      </div>
138      <div>block</div>
139      <div class="wrapper">
140        <div class="float1"></div>
141        <div class="parent"><img class="child" style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII="></div>
142        <div class="float2"></div>
143      </div>
144      <div>inline-block</div>
145      <div class="wrapper">
146        <div class="float1"></div>
147        <div class="parent"><img class="child" style="display: inline-block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII="></div>
148        <div class="float2"></div>
149      </div>
150    </div>
151    <div>
152      <div>input</div>
153      <div>default</div>
154      <div class="wrapper">
155        <div class="float1"></div>
156        <div class="parent"><input class="child"></div>
157        <div class="float2"></div>
158      </div>
159      <div>block</div>
160      <div class="wrapper">
161        <div class="float1"></div>
162        <div class="parent"><input class="child" style="display: block;"></div>
163        <div class="float2"></div>
164      </div>
165      <div>inline-block</div>
166      <div class="wrapper">
167        <div class="float1"></div>
168        <div class="parent"><input class="child" style="display: inline-block;"></div>
169        <div class="float2"></div>
170      </div>
171    </div>
172    <script>document.body.appendChild(document.createElement('pre')).appendChild(document.createTextNode(navigator.userAgent))</script>
173  </body>
174</html>

追記

古いiPadのSafariのスクリーンショット

最新版ではないので参考程度ですが、canvas要素はChromeと同じ結果ですがimg要素はChromeともFirefoxとも違う結果になりました

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

回答1件

ベストアンサー

レンダリングエンジンによる出力結果の違いについては
本職の方々のほうが面白い解説をしてくれるだろうと思って様子を見ていましたが、
あまり多くの方の目に止まらなかったようなので、答えさせていただきます。

私の少ない経験上floatは特に出力結果に違いが出やすく、特に酷いのはInternetExplorerで、「他主要ブラウザでは思い通りに動くのに...」という場面が多く、そのくせアップデートがほとんどされないことから界隈では大変嫌われておりました。
今回のケースも一言で言えばレンダリングエンジンによる違いによるものです。
それぞれのレンダリングエンジンがどういった過程を経たために出力結果が異なることとなってしまったかというと、私には難しいことなので、より詳しい人が現れるのを待つか、
自分でソースコードを読みに行くしか無いです。

どちらが正解か

上で述べたように、HTML、CSSによる文書はPDFのように「
どの環境でも出力結果が同じ」を保証することが難しい(ほぼ無理)です。
同じブラウザでもOSや使用しているフォント、ブラウザのバージョンなどによっても出力結果が変わります。
なので、それを理解した上で主要ブラウザで意図したように動作するか検証する必要があります
(身内だけで使うなら特定のブラウザを指定するのもありでしょう)。
どちらが正解とかは無いです。

投稿2020/11/15 06:40

2ckD

総合スコア305

_._

2020/11/15 09:04

InternetExplorerが個性的だったのはわかりますが最新のChromeやFirefoxも昔からあるfloat部分でまだ個性が残っているんですね canvas要素やimg要素やinput要素（やselect要素など）はほかの要素とはちょっと違う感じなのでこれらの要素だけ何か別の処理がされていてそれが個性につながっているのでしょうかいずれにせよfloatは鬼門なんですね floatは避けられる限り避けたいと思いますというか正解ってないんですね重なり順は決まっているものだと思っていました