「Firefox」上で生じていた問題
ブラウザ Firefoxは、Chrome/Edgeが AD配信側にすりよる傾向を強めている中で、ユーザーライクな姿勢を守ろうとしている様に見えますが、今後どうなるのか？
さて、Firefoxの仕様変更が関係している様に思われますが、今回の「基幹ツールの起動確認」の導入を通じて、多くのツールで以下の問題が生じている事が判りました。
「input要素」のスピナー
「input要素」は色々な種類化があるのですが、数値を指定する「number型」には、通常は値を変更するスピナー「 」が表示されます。
このサイズか位置に変更があったと思われ、このサンプルのツールでは、マスキングの「px」の文字から、スピナーの端がはみ出しています。
「input要素」の表示ずれ問題は、多くの種類のツールで生じています。
全角空白が関係する改行
これは、かなり致命的なデザイン崩れを生じます。 私のコーディングの甘さかも知れませんが、要素とテキストが混在するパネル表示などで、位置調節に「全角空白」を使った箇所があります。 テキストは span、p、div等の要素でラップして、それらの「margin」で配置を調整するのが理想でしょう。 しかし、コードをコンパクトにしたいので、「空白文字」で配置を調節する事があるわけです。
ところが、「空白文字」は html内で扱いが不安定な場合があり、今回はその例ではと思われます。
下の例は Chromeの表示で、問題がない正常な状態（表題部）です。
下は Firefoxでの表示で、謎の行折れが生じていました。
この表題部は「SVG画像」と「 いいねされた記事」を並べ、全角空白文字の「 」で、画像とテキストの間隔を調節しています。 しかし、テキスト部の表示幅に制限はないのに、「事」の文字が改行されています。 下は検証のために文字数を増した状態ですが、やはり1文字だけ改行で送られています。
テキストが収まる幅が「全角空白」を除いて計算され、そこに「全角空白を足したテキスト」を収めた結果、行溢れをした様に思えます。
この「SVG画像」＋「テキスト」のラップ要素に「white-space: nowrap」を指定して、これは改善できます。「全角空白」を使った似た状態で問題が生じない箇所もあり、「Tampermonkey」か「Firefox」か、どちらに原因があるのか不明です。
Firefox対応の修正をしたツールの一覧
以下のツールは、Chrome / Edge では問題がありませんでしたが、Firefox上で上記のデザイン上の問題があり、Firefox対応修復の更新を行いました。
◎「◙」デザイン崩れが大きく更新が必須のツール
◎「▩」デザイン崩れが大きなツール
◎ デザイン崩れが軽微なツール（マークなし）は、未修正でも使用ができます。
〔この表の更新は 2023.01.08 です〕
| ツール名 / 更新コードのリンク | 更新済ver | 纏めPage | |
| Bad Iine Mute | 3.8 | ◙ | （4） |
| Blog Table ⭐ | 3.0 | （2） | |
| BQuote Sign ⭐ | 0.8 | ◙ | （2） |
| Comment Beautify | 0.8 | ◙ | （4） |
| Comment C-O | 1.5 | ▩ | （4） |
| Comment C-O With CSS | 1.6 | ▩ | （4） |
| CoverImg Checker | 0.9 | ◙ | （7） |
| Draw The Line ⭐ | 0.7 | （2） | |
| Elements Palette ⭐ | 4.3 | （2） | |
| Every Page Map 💢 | 3.4 | ◙ | （7） |
| Every Page Opener 💢 | 2.9 | ◙ | （7） |
| Every Page Snap 💢 | 2.9 | ◙ | （7） |
| Fixed Format Palette ⭐ | 6.2 | （2） | |
| Follow Feed Checker | 1.9 | ◙ | （5） |
| SVG Repair ⭐ | 0.5 | ▩ | （3） |