2023/12/20に、Firefox 121.0 がリリースされた。
その影響のためか、Webサイトがバグったという情報を耳にしたので調べてみた。
謎の挙動
selectタグのoptionの値で、前後に全角スペースが含まれていると値がバグるらしい。
以下の図で、左側がFirefox 121.0、右側はEdge 120.0.2210.91 で試したもの。
このように、optionの値が途中で切れてしまう。
再現したhtmlタグは、以下の通り。
<p>先頭にスペースなし</p> <select> <option>オプション１</option> <option>オプション２</option> <option>オプション３</option> <option>オプション３-１</option> <option>オプション３-２</option> </select> <p>先頭に全角スペースあり</p> <select> <option> オプション１</option> <option> オプション２</option> <option> オプション３</option> <option> オプション３-１</option> <option> オプション３-２</option> </select> <p>末尾に全角スペースあり</p> <select> <option>オプション１ </option> <option>オプション２ </option> <option>オプション３ </option> <option>オプション３-１ </option> <option>オプション３-２ </option> </select>
おかしくなっている箇所をFirefoxの開発者ツールで見てみると、改行？か何かが入っているのか、値が変な事になっている。
なお、全角スペースでは問題が発生するが、「 」を使っている場合には問題ない。
原因を探る
Firefox 120までは問題なく、Firefox以外のブラウザでも問題ない。
どうやらFirefox 121.0で変になったように思え、Bugzillaから情報を探してみると以下が該当していそう。
bugzilla.mozilla.org
Bugzillaではbuttonタグも例に挙げられている。
スレッドを見ると、「何らかの問題へ対処する修正が入っていたが、それが仇となったので元に戻した」といった感じ。
selectタグのoptionやbuttonタグで確認したが、他にも影響を受けるものがあるかもしれない。
対処
Firefox 122 ではFixされてリリース（1/23予定）されるらしい。
また、121.x dot-release（121.0.1 など）があれば、修正されてリリースされると思われる。
自分がクライアント側であれば、次期Firefoxリリースまで待つか、他ブラウザを利用する事で対処できる。
自分が開発者側であれば、次期Firefoxリリースまで待つか、全角スペースをやめるしかない。
前述の「 」に置き換える方法も考えられる。
余談だが、そもそも「なぜoptionの値の前後に全角スペースがあるの？」と思い、今回の情報元へ尋ねてみたところ、
- 値の先頭にあるスペースは、インデントの目的で使っていた
- 値の末尾にあったスペースは、おそらく誤入力
ということだった。
【1/7追記】
他にも関連除法があったので追記。
bugzilla.mozilla.org
【1/10追記】
本記事の不具合は、1/9リリースの Firefox 121.0.1 で修正済となりました。
www.mozilla.org
Fixed unexpected line wrapping in some CJK contexts caused by changes in ideographic space handling. (Bug 1870973)
