< select>下降闪烁在iphone浏览器与iScroll4脚本的焦点 [英] <select> drop down flashing on focus in iphone browser with iScroll4 script

问题描述

在iphone中查看此演示页面 http://jsbin.com/unese4/8 底部的页面有一个下拉菜单打开，但不能正常工作。

See this demo page in iphone http://jsbin.com/unese4/8 at the bottom of the page there is one dropdown which opens but doesn't work properly.

此问题与此问题有关 iScroll 4问题与形式< select>元素iphone safari和android浏览器

推荐答案

实际上，您的问题与此问题相关：

Actually, your issue is related to this question:

使用选择元素在Safari上使用webkit-transform问题

当输入在iOS Safari中获得焦点时，输入在视图中。如果不是，Safari强制滚动文档和包含输入的元素，以使其可见。

When an input gains focus in iOS Safari, it checks if the input is in view. If it isn’t, Safari forcibly scrolls the document, and the element(s) which contain the input, to make it visible.

iScroll使用CSS变换移动周围的可滚动区域，看起来Safari的行为被破坏为 select s - 它没有注意到转换，认为 select 是在视图之外，并滚动其容器（ #scrollable ）使其可见（再次，不考虑变换），这就意味着

iScroll uses a CSS transform to move the scrollable area around, and it looks like Safari’s behavior is broken for selects — it doesn't notice the transform, thinks that the select is out of view, and scrolls its container (#scrollable) to make it visible (again, not accounting for the transform), which puts it way out of view.

这基本上是一个iOS错误，应该是报告给苹果由尽可能多的Web开发人员受到问题的影响！一个解决方法可以在iScroll中最有效地实现，所以我鼓励你向开发人员报告问题。

This is fundamentally an iOS bug, and should be reported to Apple by as many web developers as are affected by the issue! A workaround can be implemented most effectively inside iScroll, so I encourage you to report the issue to its developers.

这就是说，我想出了一个解决方法，在这个答案的底部。您可以使用它，通过调用它，一次，与您的iScroll实例：

That said, I have come up with a workaround, which you'll find at the bottom of this answer. You can use it by calling it, once, with your instance of iScroll:

workAroundiScrollSelectPositioning(myScroll);

现场演示是在您的jsbin粘贴此处。当选择获得焦点时触发，并执行三项操作：

A live demo is at your jsbin paste here. It triggers when a select gains focus, and does three things:

1. 记住滚动位置，并告诉iScroll立即滚动到左上角（删除任何变换），并设置 top 和 left 滚动区域的CSS属性到当前滚动位置。

1. Remembers the scroll position, and tells iScroll to immediately scroll to the top left corner (removing any transform), and sets the top and left CSS properties of the scroll area to the current scroll position. Visually, everything looks the same, but the scroll area is now positioned in a way that Safari will see.

阻止iScroll看到任何触摸（这是丑陋的

Block iScroll from seeing any touches (this is ugly, but it stops iScroll from applying a transform on the scroll area while we have it repositioned).

当选择失去焦点，把一切都恢复到原来的状态（恢复原始位置并转换并停止阻止iScroll）。

When the select loses focus, put everything back to the way it was (restore the original position and transform and stop blocking iScroll).

还有一些情况下，元素的位置可以搞砸了（例如当 textarea 有焦点，但只有部分在视图中，你键入并导致Safari

There are still cases where the element's position can get screwed up (e.g. when a textarea has focus but is only partially in view, and you type and cause Safari to try to bring the rest of it in view), but these are best fixed in 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);
}

这篇关于&lt; select&gt;下降闪烁在iphone浏览器与iScroll4脚本的焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！