Chromeの読み込み時に要素をフォーカスできない - 非常に奇妙なバグ（Chromeの場合）

Question

Chromeで問題と思われる非常に奇妙な問題があります。 ユーザーがWebサイトにアクセスすると、ユーザーは要素をフォーカスすることができません（マウスのクリック、タブでフォーカスすると、要素は「集中」状態になりません）。つまり、ユーザーがウィンドウのサイズを変更したり、ウィンドウを最小化したり、新しいタブを開いたり、開発者ツールなどを開くまで、ページをリロードすることは何もしません。ただし、フォーカスが有効になるとすぐに、パージキャッシュなどでナビゲート/リフレッシュし、ブラウザを閉じて再度開くと、すべて正常に動作します。要素は正常に「集中」状態になります。

この現象はChromeでのみ再生でき、localhostでは再生できません。

違いではlocalhostとベータ環境間：

• ベータenvが開発ENV内のファイルは、単一のJSと単一のCSSファイルにconcatedされており、両方が
を最小限に抑えられる認証（HTTPベーシック認証）
• が必要です「サイズ変更」イベントをリッスンでしょう何のカスタムイベントリスナーはありません

ローカルホストにはhotjarはありませんしながら、

ベータenvが、hotjar含まれています。コンソールにエラーはなく、フォーカスされた要素の状態に依存しないすべてのjavascriptが正しく実行されます。ホバーイベントと、ホバリング状態に依存するすべてのCSSスタイリングは、すべて正しく動作します。

主な問題は、記入して日付ピッカーを含むフォームに記入することができないため、ユーザーは実際にページとやり取りできないということです。 Datepickerは開かず、入力要素がフォーカス状態にならないので、視覚的に変更されません（CSS：フォーカスされたセレクタも機能しません）。したがって、ユーザーに印象を与えることができます。通常のテキスト入力（これは、入力をクリックした後、入力に入力することができます）。

ホットジャーの取り外しを試みましたが、問題は解決しませんでした。ただし、この段階ではオプションではない基本認証を削除するだけでした（クローズドベータテストなので、パスワード付きのユーザーのみにアクセスを制限する必要があります）。 基本的な認証が要素のフォーカスされた状態を妨害することは非常に奇妙です。特に、更新後にエラーが解消され、ブラウザ自体と対話するとすぐに消えます（最小化、新しいタブの開き、サイズ変更あなたのブラウザのウィンドウや文書）、それが正常に動作し、エラーはまったくありません。

問題は最近になって表示され始めましたが、私は数ヶ月前のビルドにロールバックして問題を解決しようとしたため、アプリケーション自体の問題ではないと思います。 Chromeのバグだと私は信じていますが、それを修正するために何ができるのでしょうか？

EDIT：オートフォーカスプロパティを入力要素に追加しようとしましたが、ベータ版環境ではフォーカスが得られません。

Answer 1

モバイル版（AndroidとiOS）のChromeブラウザとデスクトップChromeブラウザ（WindowsとMacの両方でテスト済み）にChromeのバグがあるようです。私は公式のバグ報告を提出した。バグレポートでは、仲間のユーザーが基本認証のみでアクセス可能なウェブサイトを作成し、基本入力が2つしかない場合、入力には赤い枠線が表示されます。予想通り、Chromeでウェブページを開いた後（シークレットモードの使いやすさ）、入力にはフォーカスが得られず、境界線も変更されません。

もChromeでこのバグの影響を受けている人のために

、あなたがここにバグの進捗状況を追跡することができますhttps://bugs.chromium.org/p/chromium/issues/detail?id=740652

一方、ここに興味のある人のためのハックソリューションがあります：

$(document).on("ready", function() { 
    var $inputs = $("input"); 
    $inputs.off("click.trick"); 
    if (!sessionStorage.fixedChromeFocus) { 
     sessionStorage.fixedChromeFocus = "true"; 
     $inputs.on("click.trick", function() { 
      var win = window.open("/", "_blank"); 
      setTimeout(function() {win.close()}, 1); 
      $inputs.off("click.trick"); 
     }); 
    } 
    }); 

目標はあります、どういうわけか、現在のページの外のブラウザとやりとりして、どうにかしてフォーカスを失うようにします。 JSを使用してブラウザを最小限に抑えたり、サイズを変更したり、開発ツールを開くことはできません。あなたができることは、新しいウィンドウが開きます。もちろん、新しいウィンドウをすぐに開くと、ポップアップブロッカー（ほとんどの人がそれを持っている）がブロックし、ウィンドウ自体（または現在のタブ）がフォーカスを失うことはありません。新しいウィンドウを開くことは、潜在的なポップアップブロッカーを起動させることなく、ユーザーイベントへの反応としてのみ行うことができます。

私はまた、いくつかのブラウザ検出を使用するので、コードはChrome用にのみ実行され、サーバー側の条件付けを使用して基本認証を含むビルドに対してのみ実行されます。 コードは、ユーザーが入力をクリックするとすぐに、新しいタブを開き、すぐに1ms後に閉じるようになっています。これを防ぐには、すべてのページの読み込み時に、そのドメインのタブが閉じられた後に自動的に消去されるsessionStorageが使用されます（そして、フォーカスが正しく動作するようになったら、ブラウザを開いたままにしておきます）。

このコードの効果は、ユーザーが迅速に白い閃光に彼が入力をクリックする最初の時間が表示されますが、すべてが正しく