jQuery UI Selectmenu on iPhone not compatible with Fullscreen.js?

[cobwebmedia]

I'm using jquery-1.12.4.js, jquery-ui.js and the latest fullscreen.js code. Whilst Selectmenu is being recognised and successfully switching out with the usual styled HTML, on the iPhone (latest OS) selecting one of the options fails to propagate the value. All works fine on dektop - just seems to be an issue on iPhone.

Have commented out fullscreen.js and the functionality returns.

[alvarotrigo]

Closed until an isolated reproduction is provided as detailed in the reporting issues guidelines and the issue skeleton.

[cobwebmedia]

Hi, I've now added my stripped down code to https://jsfiddle.net/kingrandolf/4m2aefgs/ - it is a little tricky trying to replicate this via JS Fiddle on the iPhone - I can send over a zip of my code if you'd prefer.

Incidentally I have been looking into this and I believe I know the source of the issue. When a section has more content than the available height the content gets wrapped with two divs (fp-scrollable and fp-scroller) - this seems to be what knocks it out. I have added a fixed height of 800px to the form, so if you remove this and reload you'll find the select works.

Thanks, and great script aside from this. Everything else is looking great.

Andy

[alvarotrigo]

Steps to replicate the issue?

[cobwebmedia]

Hi, please access the stripped down version at https://www.andyhitchman.co.uk/scripts/fullpage-issue-2/ via any (physical) iPhone with latest OS. If you try to choose an option from the select it won't populate. However, remove the 800px height from the form and you'll notice the content no longer gets wrapped with those two divs and the select then works.

It doesn't have to be a physical height that triggers this either - if you add enough content to the section so its wrapped within the two divs you'll notice the issue arises too.

Find zip attached.

fullpage-issue-2.zip

Thanks

[alvarotrigo]

Do you need to use scrollOverflow: true?

[alvarotrigo]

This is probably the very well known iScroll issue. Nothing to do with fullpage.js but with the library used when using scrollOverflow:true.

Related topics are #2260 and #2035

[cobwebmedia]

I do, because the form will have more inputs and these push the inner content down past the bottom of the screen. I know I could choose not to use this for mobile but I've sorted through a number of issues to get the site working really smooth on mobile - I wouldn't want to give up at this last hurdle.

I'm surprised this issue hasn't been picked up before.

Do you have any ideas?

Thanks

[alvarotrigo]

Do you have any ideas?

As i said in the previous comment. This is a iScroll issue, not a fullPage.js one.
Also, you can probably replicate this issue with just iScroll itself and your jQuery element.
See cubiq/iscroll#783

The iScrolll library has weird issues when it comes to buttons as well:
cubiq/iscroll#561

You might have to consider using and absolute positioned element for your menu instead. This won't create any scroll bar and might solve the problem

[cobwebmedia]

Okay. I’ll take a look at the links and see if I can make a compromise. Seems like this is a bit of a problem though, even if it’s not directly related to fullpage.js. It’s quite a basic thing not to work. Regards, Andy

…

On 5 Dec 2016, at 17:36, Álvaro ***@***.***> wrote: Do you have any ideas? As i said in the previous comment. This is a iScroll issue, not a fullPage.js one. Also, you can probably replicate this issue with just iScroll itself and your jQuery element. See cubiq/iscroll#783 <cubiq/iscroll#783> The iScrolll library has weird issues when it comes to buttons as well: cubiq/iscroll#561 <cubiq/iscroll#561> You might have to consider using and absolute positioned element for your menu instead. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2436 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AH-74Qa5t7Pnzfuqlv9cEQhtkX0NOQ4tks5rFEuBgaJpZM4K_NeA>.

[alvarotrigo]

I always recommend not to use scrollOverflow:true.
That's just a "hack".

[cobwebmedia]

Okay, I might strip the form down and avoid scrollOverflow:true, although if I could just disable for that section that would be ideal. Is that possible? Regards, Andy

…

On 5 Dec 2016, at 17:42, Álvaro ***@***.***> wrote: I always recommend not to use scrollOverflow:true. That's just a "hack". — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2436 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AH-74bccVB1-CVrdMi_jWW_w0vvjSCNbks5rFEz5gaJpZM4K_NeA>.

[alvarotrigo]

Also another option.
Then follow the docs and use fp-noscroll in that section.

[cobwebmedia]

Perfect. Thanks Andy

…

-- Andy Hitchman Creative CobwebMedia Worting House Church Lane Basingstoke Hampshire RG23 8PX T: +44 (0)1256 881637 E: andy@cobwebmedia.co.uk <mailto:andy@cobwebmedia.co.uk> W: www.cobwebmedia.co.uk <http://www.cobwebmedia.co.uk/>

On 5 Dec 2016, at 17:49, Álvaro ***@***.***> wrote: Also another option. Then follow the docs and use fp-noscroll in that section. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2436 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AH-74RUAMSLMel4nEWBHL8HHoc0MVpz_ks5rFE7HgaJpZM4K_NeA>.

[intercode]

Hello,
I was having some problems to make a "chosen" select to work with scrollOverflow:true. I couldn't click on it. Using "fp-noscroll" on the section that has the form solved the problem. Thank you for the tip.

[alvarotrigo]

@intercode are you initializing chosen in the afterRender callback as suggested in the documentation and the Frequently Answered Questions?

This might be a bug in iScroll, check this topic.