FirefoxでGoogleの検索バーで日本語入力すると灰色の四角(半角スペース)が表示され、その後の文字が入力しづらい・入力できない現象に長い間悩まされていました。
※上記の謎の灰色の半角スペース の箇所は現象説明用に作成したものなので、実物とは少し異なるかもです。
ググっても、この件についてあまり書いてないんですよね、というか、
- 現象の正式名称が不明なので、何と検索すれば解決策が見つかるのか・・・の検索キーワードがわかりません。
- 検索キーワードがわからないのでググっても見つからない、というか、何とググれば良いかがわかりません＞＜
Firefoxユーザー全員が該当するわけではない、いわゆる「おま環」 なのか？・・・と思って半分諦めていましたが、おそらく数年越しでようやく解決できました！
1・2ヶ月、現象再発していません。
解決方法はたぶん複数あります。
■解決方法その1■userContent.cssで対策する場合
about:configあるいはuser.jsにて、toolkit.legacyUserProfileCustomizations.stylesheets：true にする
↓
C:\Users\●ユーザー名●\AppData\Roaming\Mozilla\Firefox\Profiles\●プロファイル名●\chrome\userContent.css にて以下のコードを記述する
/* Google検索の日本語入力時の表示崩れ（灰色の四角）対策 */
@-moz-document domain("google.com"), domain("google.co.jp") {
/* 基本対策：入力欄の親要素の溢れ制限を解除 */
form[role="search"] * {
overflow-x: visible !important;
}
/* Reddit案：特定要素の干渉を防ぐための非表示設定 */
#fbarcnt {
display: none !important;
}
/* --- 以下、解決しない場合のみ有効化（/* と */ を削除） --- */
/*
.RNNXbe, .SDk9S {
overflow: visible !important;
}
*/
}
※userContent.cssは自分で作成する。文字コードはUTF-8です。
↓
Firefoxを再起動
私は ■解決方法その1■userContent.css で解決しました。
■解決方法その2■uBlock Originのマイフィルター
uBlock Originのマイフィルターに以下のコードを追加するやり方でも解決できるようです。
! Google検索の入力欄の表示崩れ対策
google.com,google.co.jp##form[role="search"] *:style(overflow-x: visible !important;)
! redditで紹介されていた要素の非表示（必要に応じて）
google.com,google.co.jp###fbarcnt
! それでも解決しない場合、以下の「!●」を消して有効化してみる
!●google.co.jp##.RNNXbe:style(overflow: visible !important;)
!●google.co.jp##.SDk9S:style(overflow: visible !important;)
たぶんStylusやNoScriptでも解決できます。
■解決できたか、の確認方法
「ready or not」等、予測入力候補・サジェストが表示される検索キーワードにて検索して、その後日本語入力およびローマ字入力に切り替えたりしながら、その後の文字入力の位置に
謎の灰色の半角スペース が再発するか確認してみてください。
以下、参考サイト
https://www.reddit.com/r/firefox/comments/dyb35u/grey_box_obscuring_search_results/?tl=ja※Redditの内部エラーで上記URLにリンクが貼れません。
