showOverflow set to true messes up with Dojo events (map click) on mobile devices

[CarpeCodemAtGit]

We're using materialize.css and fullPage.js alongside dojo (the js api) and ofcourse jQuery. Clicking on the map doesnt work, and dropdown selection doesnt work or both stop working upon returning from slide with inputs. When showOverflow is set to false everything works.

Link of example:
https://jsfiddle.net/b2Lb16b8/1/

Steps to reproduce it

1. Click button 1
2. Click somewhere on the map (in the section that scrolls up), and it should slide right
3. On mobile (various mobiles) this fails unless showOverflow is set to false also dropdown on the next slide doesnt work.
   I am uncertain if this is something to do with "responsivenes" of the bootstrap/materialize.css

   Versions

   Various browsers(chrome in mobile dev mode - desktop, chrome android, opera mini android, dolphine android) , various devices(nexus5 phone, nexus7 tablet) , (works on certain sizes, but wont on most)

[alvarotrigo]

Try to isolated the reproduction much more with the very basics. No map or external libraries if possible.

If you are not sure if materialize has anything to do with it, just remove it and try to reproduce the issue without it.

In any case, it seems to be more an issue of iscroll.js than fullpage.js.
Probably realted with the option click.
Try setting it to true by using the fullpage.js option scrollOverflowOptions like this:

scrollOverflowOptions = {
      click: true
}

[CarpeCodemAtGit]

Actually a collegue set it to false (just tried "true" but wont work at all) like half and hour ago and it helped to some extent, now it works on mobile but not on nexus7. Update following soon

[alvarotrigo]

Update following soon

It is a well known bug of iScroll.js. It was previously discussed in this issue: #2035

The solution fullpage.js adopted was to turn it to true on mobile devices and false in desktops.
To do so, fullpage.js uses internally the following:

var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0) || (navigator.maxTouchPoints));
iscrollOptions.click = isTouch; // see #2035

Can you please check if isTouch is returning true for your touch device?
No simulators, use the real device please.

[CarpeCodemAtGit]

isTouch doesnt seem to be defined

http://tinypic.com/r/2hdmnah/9

[alvarotrigo]

No and it shouldn't . It is not a public global variable.

What I'm suggesting if you creating the variable outside fullpage.js and checking its value. But again, in the touch device itself.

var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0) || (navigator.maxTouchPoints));

[CarpeCodemAtGit]

ah sorry yes it is true

p.s. im posting screenshot of a remote debug from nexus5, it is a mobile

[alvarotrigo]

yes it is true

Are you talking about the variable ? Is it true?

[CarpeCodemAtGit]

Yes sir, isTouch is true

https://jsfiddle.net/b2Lb16b8/5/ and i've mustered up this and it kinda works on my mobile now (at least the map clicks) but the dropdown still wont accept the selected value

[alvarotrigo]

Regarding materialize issue, try to create a more simple example with empty sections to see what's going on.
Or just remove fullpage.js completely and see whats going on.

I'll close the issue as it seems you have solved the main problem.

[CarpeCodemAtGit]

Sadly it doesnt work on tablet. I'll keep on hacking at it and update you when ive found the sollution. Thanks for the swift responses. But please dont close it yet. Till i've tested on all devices thoroughly.

best regards,
Matej

[alvarotrigo]

I though you said:

it kinda works on my mobile now

Just keep checking the isTouch value for each of those devices.

[CarpeCodemAtGit]

My mobile:
The clicks on map work, but the dropdow/select wont pick the selected option
Tablets: neither works

and isTouch is true on both

update: mobile phones and tablets act the same, i just noticed the clicks dont work in landscape on either. Hmm this is becoming really weird

[alvarotrigo]

You'll have to isolate each of your problems as I said.

• Remove fullpage.js and try again.
• Keep fullpage.js but keep it empty without any external libary and just a dropdown and materialize
• Keep fullpage.js but keep only click even that it doesn't work (not map required).

Until not isolated I can not help I'm afraid.

[CarpeCodemAtGit]

Will do, thank you for your time for now. Appreciated

[markonose]

Hello, I'm the colleague of the guy who raised this issue.

We have prepared some examples:

Example 1: http://demo.gisdata.si/fullPage/example.html
fullPage is not included and the dropdown works correctly

Example 2: http://demo.gisdata.si/fullPage/example1.html
fullPage is included but with scrollOverflow set to its default value of false, the click event registers and the drop down works

Example 3: http://demo.gisdata.si/fullPage/example2.html
fullPage is included and the property scrollOverflow is set to true, in scrollOveflowOptions click is set to true if it's a touch device and false if it's not, I removed the slide in this example god knows why(it logs the success into the console instead), on the emulator it registers the clicking events(unless in landscape mode) but while testing on my phone it does not work at all

Example 4: http://demo.gisdata.si/fullPage/example3.html
this is the same as above except preventDefault: false is added to scrollOverflowOptions, it reproduces the same behavior

Example 5: http://demo.gisdata.si/fullPage/example4.html
same as the above but the click in scrollOverflowOptions is set to false, now the click events start working as expected

So my question is as it follows. Why does it work with click set to false when your proposed solution was to have it on true for touch devices. Do you have any ideas? Also a follow-up question. Should any issues with scrolling be reported to the iScroll GitHub page or do you have any information on it? The problem is now that on the Android tablet I'm using to test the website the scrolling is not very good. It moves a small distance on every swipe up/down and sometimes it jumps for three times the amount. Works perfectly on my Android phone. On an iPad, it's also a little jumpy on the section containing the map in it, but the other slide works just fine.

Love your plugin, I would really like to make the website work with it

Thank you for your help.

[alvarotrigo]

Should any issues with scrolling be reported to the iScroll GitHub page or do you have any information on it?

I would suggest so.
As I said, this is a known iScroll bug.

In any case, I personally wouldn't use scrollOverflow.
A real responsive site shouldn't need it. I would go for the responsiveWidth option combined with fp-auto-height-responsive.