Firefox使用時にジョブガイドのサイトデザインが崩れる

スレッド名：
Firefox使用時にジョブガイドのサイトデザインが崩れる

詳細：
Firefoxによりジョブガイド・バトルアクション編トップページを表示すると、高い確率で「HEALER/ヒーラー」ブロックのp.js__tile_text要素へ動的にインラインで設定されるheightの値が不正となり、兄弟要素となるulブロックが重なって表示されてしまいます。
https://img2.finalfantasyxiv.com/acc...05dda68fb2.png

レイアウトシフトが発生すると重なりは軽減されますが、p.js__tile_text要素のheightは不正なままです。

具体的には３行ぶんのheightが必要なところ、およそ２行ぶん程度のheightが設定され、overflowしている状態です。ただしリロードを繰り返すと３行ぶんが設定されることもあるようです。
https://img2.finalfantasyxiv.com/acc...7146306bdb.png

あるいはjQuery.tile.jsをご利用かと思われますが、tile()メソッド呼び出し時点で、p.js__tile_textのレンダリングが完了していないのではという印象です。

発生日時：2023年8月11日 13:47
発生箇所：ジョブガイド－バトルアクション編－トップページ https://jp.finalfantasyxiv.com/jobguide/battle/
OS：Windows 10 Pro 22H2、macOS Ventura 13.5
ブラウザ名：Firefox 116.0.2（Windows版、macOS版とも）

それはFirefox側の問題かと思います。
EdgeやChromeに代表されるChromiumベースのブラウザが主流のため、Firefoxでレイアウトが崩れるサイトは増えてきているように思います。
"firefox レイアウトが崩れる" といった検索ワードでググってみて対処法を試してみてはどうでしょうか。

残念ながら、Firefoxの不具合であるという確証をわたしは持ち合わせておりませんし、仮にFirefoxの不具合であったとしても、このままで良いという判断はできません。その判断は、コーディング担当者さんが行うものと期待しております。

ただし素人のわたしが付け加えるならば、jQueryのクロージャー（ready）内で要素の高さを取得しようとしている（onloadイベント等の発火を待っていないのでフォントの遅延ロード後にレイアウトシフトが発生し、文字列の高さ等にずれが生じてもおかしくない）あたり、気になってはいます。

Firefox側のChromiumとの互換性不足ということでしょうね。
ホームページがChromium基準で作られているのなら、それを正しく表示できないブラウザ側の問題かと思います。

自分もEdgeとSleipnirで共に正常に表示されていることを確認しました。

難しい話はよくわからないけど、自分の環境だとFirefox116.0.2(64ビット)で該当ページを開いても特に表示崩れは発生しないですね。
（Firefoxは普段使ってないので拡張機能も一切入れてない状態です）

ツールバーやらメニューバーを出し入れしたりしてレイアウト変えてみたり、全画面化や縮小して何回か試しましたが私の方も崩れないですね。
とりあえず10回程度表示してみました。
win10/Firefox116.0.2(64ビット)
お使いのPCの調子が悪いのか、MACだとちょっと違うのか、このスレッドで気づいて直したか。

追試ありがとうございます。

スタイルシートやウェブフォントがキャッシュに存在する場合、異常は軽減される様です。
←期待するマージン
→Firefoxで異常が軽減されている（様に見える）状態
https://img2.finalfantasyxiv.com/acc...4c90ac7a39.png

この場合、「蘇生も行える。」という3行目が、実ははみ出ています。そのぶん、マージンが減っています。
https://img2.finalfantasyxiv.com/acc...7aac1b80c9.png
（個人的には、リソースを読み込みレイアウトが確定するその前に、javascriptで要素の高さを得ようとしているため値が期待通りにならないと考えております）

まっさらなFirefox 116.0.2でキャッシュをクリアしてリロードを何度もやってみましたが再現できませんね
Firefoxにこだわりがある人ってなんらかのアドオンを必ず使ってると思うのですが
カスタマイズの内容を全てかけますか？

ありがとうございます。

Firefoxを「トラブルシューティングモード」で起動しますと、試行回数は少ないものの、問題の再現は見られなくなりました。

一方で、jQuery.tile.jsを紹介する記事ではやはり、正しいサイズを取得するためとし、onloadイベントの発火を待って実行するコードを用いているものがございますことから、以後はご担当者様のご判断に委ねることといたします。

Quote:

---

Originally Posted by Oyoyo

Firefoxを「トラブルシューティングモード」で起動しますと、試行回数は少ないものの、問題の再現は見られなくなりました。

---

現時点で同様の報告がないので、環境固有の問題では無いでしょうか？
もしAdBlock系アドオンを使っていましたら、それらを無効にして確認してみてはどうでしょうか？

AdBlock系アドオンは広告バナー等を非表示にするので、レイアウトが崩れることも多々ありますよ。