実際、あなたの問題はこの質問に関連しています：

select要素を使用したサファリでのwebkit-transformの問題

iOS Safari で入力がフォーカスされると、入力が表示されているかどうかがチェックされます。そうでない場合、Safari はドキュメントと、入力を含む要素を強制的にスクロールして、表示できるようにします。

iScroll は CSS 変換を使用してスクロール可能な領域を移動しますが、Safari の動作がselects に対して壊れているように見えます — 変換に気付かず、selectがビューの外にあると考え、そのコンテナー ( #scrollable) をスクロールして表示します (繰り返しますが、変換は考慮されていません)。

これは基本的に iOS のバグであり、この問題の影響を受ける Web 開発者はできるだけ多くApple に報告する必要があります。回避策は iScroll 内で最も効果的に実装できるため、開発者に問題を報告することをお勧めします。

そうは言っても、この回答の最後にある回避策を思いつきました。iScroll のインスタンスで一度呼び出すことで使用できます。

workAroundiScrollSelectPositioning(myScroll);

ライブ デモは、こちらの jsbin ペーストにあります。selectがフォーカスを得るとトリガーされ、次の 3 つのことを行います。

1. スクロール位置を記憶し、すぐに左上隅にスクロールするように iScroll に指示し (変換をすべて削除します)、スクロール領域のtopおよびleftCSS プロパティを現在のスクロール位置に設定します。視覚的にはすべて同じように見えますが、スクロール領域は Safari で見えるように配置されています。

2. iScroll がタッチを認識しないようにブロックします (これは見苦しいですが、再配置中に iScroll がスクロール領域に変換を適用するのを防ぎます)。

3. がフォーカスを失ったら、selectすべてを元の状態に戻します (元の位置に戻して変換し、iScroll のブロックを停止します)。

要素の位置がめちゃくちゃになるケースはまだあります (たとえば、textareaにフォーカスがあっても部分的にしか表示されていない場合に、入力して Safari に残りの部分を表示させようとする場合)、これらは iScroll で修正するのが最適です。 .

function workAroundiScrollSelectPositioning(iscroll){
    iscroll.scroller.addEventListener('focusin', function(e){
        if (e.target.tagName === 'SELECT') {
            var touchEvent = 'ontouchstart' in window ? 'touchmove' : 'mousemove',
                touchListener = {
                    handleEvent: function(e){
                        e.stopPropagation();
                        e.stopImmediatePropagation();
                    }
                },
                blurListener = {
                    oldX: iscroll.x,
                    oldY: iscroll.y,
                    handleEvent: function(e){
                        iscroll.scroller.style.top = '';
                        iscroll.scroller.style.left = '';
                        iscroll.scrollTo(this.oldX, this.oldY, 0);
                        e.target.removeEventListener('blur', blurListener, false);
                        iscroll.scroller.removeEventListener(touchEvent, touchListener, true);
                    }
                };
            iscroll.scroller.style.top = iscroll.y + 'px';
            iscroll.scroller.style.left = iscroll.x + 'px';
            iscroll.scrollTo(0, 0, 0);
            e.target.addEventListener('blur', blurListener, false);
            iscroll.scroller.addEventListener(touchEvent, touchListener, true);
        }
    }, false);
}

ユーザーがテキストフィールドをクリックしたときにドロップダウンリストを表示したいとします。そのため、ユーザーが textfield を clcik すると、デリゲート メソッドが TextFieldBeginEditing と呼ばれ、その内部で小さなテーブル ビューが作成されます。ドロップダウンリストのように見えます...

これは私のために働いた変更された関数workAroundiScrollSelectPositioningです。

function workAroundiScrollSelectPositioning(iscroll){
var touchEvent = 'ontouchstart' in window ? 'touchstart' : 'mousemove',
    oldX, oldY;
iscroll.scroller.addEventListener('focusin', function(e){
    if (e.target.tagName === 'SELECT') {
        var blurListener = {
                oldX: oldX,
                oldY: oldY,
                handleEvent: function(e){
                    iscroll.scroller.style['margin-top'] = '';
                    iscroll.scroller.style.left = '';
                    iscroll.scrollTo(oldX, oldY, 0);
                    e.target.removeEventListener('blur', blurListener, false);
                }
            };
        iscroll.scroller.style['margin-top'] = oldY + 'px';
        iscroll.scroller.style.left = oldX + 'px';
        iscroll.scrollTo(0, 0, 0);
        e.target.addEventListener('blur', blurListener, false);
    }
}, false);
iscroll.scroller.addEventListener(touchEvent, {
    handleEvent: function(e){
        if (e.target.tagName === 'SELECT') {
            oldX = iscroll.x,
            oldY = iscroll.y;
            e.stopPropagation();
            e.stopImmediatePropagation();
        }
    }
}, true);}