zepto fx_methods模块导致的android 2.2 系统自带浏览器上 select 无法正常显示下拉列表内容的问题 - dongyuwei/blog GitHub Wiki

android 2.2 系统自带浏览器上<select> 标签 ，手指触摸无法触发下拉列表内容的正常显示。

仔细排查，发现是Zepto.js（Zepto v1.0rc1-120-gbe161c9）导致的bug： 只要使用Zepto.fn.show函数来显示隐藏的select元素（或者select的父容器），就无法触摸触发下拉列表的显示。

解决办法很简单：

// $('#anySelect').show(); //不要使用Zepto.fn.show方法来显示select或者select的父容器
$('#anySelect')[0].style.display = 'inline-block';//使用原生方法，直接设置display样式。

如果select位于隐藏的iframe或者其他容器中，也要注意会导致同样问题。

另外，select的触摸触发会特别慢，如果想加快速度，可以先让该select得到焦点，如oSelect.focus().

我们使用的zepto加入了fx_methods模块（该模块默认是不加入构建的）。该模块重写了$.fn.show：

  $.fn.show = function(speed, callback) {
    origShow.call(this)
    if (speed === undefined) speed = 0
    else this.css('opacity', 0)
    return anim(this, speed, 1, '1,1', callback) //定位是该处动画导致的问题，如果origShow之后立即return,就不会有问题。
  }

http://blog.cdeutsch.com/2011/01/android-browser-issues.html 这个blog说的 -webkit-backface-visibility 也可能导致android系统浏览器bug，但我在2.2系统上没有重现。