モバイル サファリ/クロームの iframe でのとんでもないフォーカス イベントを支援します。
現在、開いている可能性のある他のフォームで作業/データ入力が失われないように、クライアント側のロジックを分離するためにiframeを使用することにしたcrm Webアプリケーションに取り組んでいます-私はそれを理解していますそれ自体は、多くの意見や議論を楽しませるのに十分です - これは私が求めているものではありません...
ページの構成は次のとおりです。
固定位置のヘッダー 固定位置の左ナビゲーション/メニュー 固定位置のメイン コンテンツ
すなわち
<body>
<nav id="header" style="position: fixed; left: 0; right: 0; top: 0; height: 50px;">
(...your imagination here...)
</nav>
<aside id="leftNav" style="position: fixed; left: 0; top: 50px; bottom: 0; width: 225px">
(...even
</aside>
<section id="mainContent" style="position: fixed; left: 225px; top: 50px; right: 0; bottom: 0; overflow: auto; -webkit-overflow-scrolling: touch">
<div id="loadingImage"></div>
<iframe id="frame_1" style="position: absolute; height: 100%; width: 100%" src="..."></iframe>
</section>
</body>
touchmove イベントを無効にしていますが、#mainContent にはまだスクロール機能があります。私が遭遇している問題は、（モバイルサファリで）ユーザーがトップフォールドの下にレンダリングされた入力に触れると（私が知る限り）、キーボードが表示され、メインセクションが入力をスクロールして表示されることです-のみ、わかりません...これは私が飲酒について考え始めたときです...スクロール可能な要素が画面を「バウンス」しているように見え、画面が再描画されます-メインセクションが一番上にスクロールし、選択した入力が非表示になります-またはまれに、scrollTop の値よりも小さい座標で実際にクリック イベントをトリガーする場合があります (300 ピクセル下にスクロールし、入力をクリックしましたが、300 ピクセル上の入力が選択されています...)。
iPad の chrome で同じサイトを開きます... バカルディを打ち破ってください - 何も機能していないようです...
私は頭がおかしくなっており、5 年間のプロとしてのキャリアの中で初めて、必死に助けを求めています. クライアント側の構造を再考する必要がありますか? 任意のアイデアをいただければ幸いです
-マット