Can't activate select using Flexslider/SwipeJS on Android/Gingerbread

孤人 提交于 2019-12-06 16:01:46

问题


I've recently finished building a mobile site and discovered a bug that only seems to occur on Android Gingerbread.

When a select input is placed on a slide within a JS slider (such as Flexslider or SwipeJS), you can no longer click it or give it focus and select the options.

I'm wondering if it has to do with the use of display none/block which both these sliders use - perhaps Gingerbread cannot render the select properly under these circumstances? Interestingly, the first slide using SwipeJS is functional; the others not.

I've popped a few tests online to demonstrate:

http://playground.iamkeir.com/slider-flexslider1-select

http://playground.iamkeir.com/slider-flexslider2-select

http://playground.iamkeir.com/slider-swipjs-select

For reference, I'm using Flexslider 2 Beta in the example, although the same issue occurs with Flexslider 1.

https://github.com/woothemes/FlexSlider

https://github.com/woothemes/FlexSlider/tree/FlexSlider2

http://swipejs.com/

Works fine on Android Icecream Sandwich, iPhone - even Blackberry.

I've been fiddling with this on and off for days now and I just can't seem to narrow it down.

Can any one assist please?


回答1:


So I was kindly given some advice from the chap who built Flexslider, Tyler Smith:

"Have you tried disabling the use of translated3d? useCSS: false, and seeing if the error still occurs? translate3d is a common denominator between swipe/flex, and behaves strangely sometimes."

He was right - that did indeed fix it, although it caused a different error with Flexslider (update: which he has recently fixed).

So beware translate3D - and CSS animations in Android < 4.x, see here: http://daneden.me/2011/12/putting-up-with-androids-bullshit/

So, to fix, I will be targeting Android < 4.x with useCSS: false.

Please note useCSS is an attribute in Flexslider 2 Beta, which is still in testing and development, so use with caution.

Big thank you to Tyler!

Ref:

http://playground.iamkeir.com/slider-flexslider2-select/

https://github.com/woothemes/FlexSlider/tree/FlexSlider2




回答2:


If the useCSS: false method doesn't work, I found that removing -webkit-backface-visibility: hidden; from the flexslider.css file fixes it.

This may mean that the flip transition won't work as expected though. Haven't tested.



来源:https://stackoverflow.com/questions/10403439/cant-activate-select-using-flexslider-swipejs-on-android-gingerbread

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!