firefoxとchomiumの表示差

ゲーム制作

Webゲームプロジェクト第二回

投稿日:

いつものMarcoです。先週に引き続きプロジェクトのレポート的なやつ書いていきます。といっても今週はとある挙動に悩まされたので、それを勢い良く綴った記事になっております。

ざっくりいえばブラウザ間の差異なんですが、流石になぜその差異が起こるのかチェックするのは至難の業なのでそこまではやっていません。予めご了承ください。

私の環境

  • ArchLinux(2019-11-27現在動かしているカーネルは5.3.13.1-1)
  • Firefox 70.0.1
  • Chromium 78.0.3904.108
  • midori 9.0(普段は使っていないがWebkit系の検証のため)

起きたこと

先週に引き続きゲームを作っていました。UI部分はVuetifyを主に使い、ゲームとしての演出としてのフォールバックにCSSを書くという具合でした。

ある程度仕上がったと思ったのでスマホでも見てみようと思い、0.0.0.0にDevServerを立てて見たのですが、要素が小さくなっていて(ゲームの演出による)強制スクロールで要素がどこかに見えなくなってしまいました。

この原因は、誤って残していたVuefityの.flex-columnでした。

サンプル

再現するために簡単なサンプルを作りました。差異が起こるソースコードはこちらのindex.htmlです。

解説

具体的に今回の事象を述べると、「flex-direction: column時、子要素が孫要素の<length>によって膨張した際に、他の孫要素の<percentage>の算出に差異が出る」という現象が発生していました。

通常の(flexではない)環境では子によって膨張した要素の値は、割合で算出する要素に影響を及ぼしません(こちらのsample.htmlMDNのこのあたりが参考になります。標準化文書まで今のところ読めていません)。

しかしdisplay: flex;ではなぜか、膨張した要素の値が子の要素の割合による算出に影響します(試しにこの行を削除して見てください)。

そんな中でflex-direction: column;においては、Chromium系で影響がなく、Firefoxで影響が起こります。ちなみにmidori(Webkit系)では影響がありませんでした。やはりBlinkの算出周りはWebkitの血を引いていたりするんでしょうかね……?

雑感

この差異の原因は正直ブラウザのレンダリングエンジン周りに精通している必要があるでしょうし、複雑な算出に関わる仕様にも同時に精通していなければならないでしょう。

そもそもheightの算出周りは、この あたりの 記事からレガシーなプロパティと評されるような闇の深さを感じますし、それに加えてflexによるの概念が加わるわけです。

おそらくその周囲になにか仕様の取り違えがあったか、解釈がそもそも異なっているなどの事情があるのでしょう。少なくとも自分よりもめっっっっっちゃ強い人がどうにか考えた結果なので、こんな特殊なケースに文句言うのは筋違いだな……って感じです。悟りを開けるか?

締め

なんかこのトラブルを理解(≠解決)したくてDevToolsで大量のCSSプロパティを無効化して試したんですけど、数時間もかかったのでもうやりたくないですね……。あとなんか、DOMTreeをドラッグアンドドロップでいじれるのは面白かった。

ゲームプロジェクトって名前でこの記事書いてるの割と意味わからないんですけど、こういう(供養的な)トラブルレポート書かないとやってられないですよね。なんなんだよ〜(ドロシー)。

果たしてゲームは完成するのか。こんな体験をさせたい!って考えたら工数かさむ一方でなんかそれっぽい雰囲気を実装できるのいいなぁって感じです。次回はユーザーインターフェイスの表現について書いて見ようかなと思っています。

ありがとうございました。

-ゲーム制作

Copyright© ソフトウェア工房 , 2019 All Rights Reserved Powered by AFFINGER5.