search

alvarotrigo / fullPage.js

fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
http://alvarotrigo.com/fullPage/
GNU General Public License v3.0
35.24k stars 7.31k forks source link

Finger swiping issue on form inputs with scrollOverflow #2747

Closed jazithedev closed 7 years ago

jazithedev commented 7 years ago

Description

Cannot swipe up/down when coursor on input field or container with overflow: auto on responsive verson of Google Chrome browser with touch events or on Google Chrome on mobile phone.

Link to isolated reproduction with no external CSS / JS

https://jsfiddle.net/p9gbzor2/4/

Steps to reproduce it

  1. Open the link with latest Google Chrome browser (in incognito, if You want)
  2. Click F12
  3. Click ctrl + shift + M
  4. Set "Responsive", 800x800px, 100% and turn ON touch events simulation and reload page (on FF it's other option to set and possibly Chrome have this set from the beginning)
  5. Set mouse coursor on the input field
  6. Hold left mouse button and try to slide up or down

Versions

Google Chrome 58.0.3029.110 (64-bit) also Google Chrome 59.0.3071.86 (64-bit) Checked also latest Chrome on the smartphone.

For the record... this works on Firefox :/.

Other

ALSO... have a look at this: https://jsfiddle.net/p9gbzor2/5/

Changed form field on div with overflow:auto. Same thing is happening.

alvarotrigo commented 7 years ago

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

alvarotrigo commented 7 years ago

Really?

Really. You didn't provide neither unminified nor uncompressed JS files. Who knows what other libraries or codes you are using in there. Notice the issue skeleton says very clearly:

links to personal websites won't be reviewed unless isolated

jazithedev commented 7 years ago

Description

Cannot swipe up/down when coursor on input field or container with overflow: auto on responsive verson of Google Chrome browser with touch events or on Google Chrome on mobile phone.

Link to isolated reproduction with no external CSS / JS

https://jsfiddle.net/p9gbzor2/4/

Steps to reproduce it

  1. Open the link with latest Google Chrome browser (in incognito, if You want)
  2. Click F12
  3. Click ctrl + shift + M
  4. Set "Responsive", 800x800px, 100% and turn ON touch events simulation and reload page (on FF it's other option to set and possibly Chrome have this set from the beginning)
  5. Set mouse coursor on the input field
  6. Hold left mouse button and try to slide up or down

Versions

Google Chrome 58.0.3029.110 (64-bit) also Google Chrome 59.0.3071.86 (64-bit) Checked also latest Chrome on the smartphone.

For the record... this works on Firefox :/.

Other

ALSO... have a look at this: https://jsfiddle.net/p9gbzor2/5/

Changed form field on div with overflow:auto. Same thing is happening.

Is this what You needed?

( modified first comment of this issue )

alvarotrigo commented 7 years ago

Thanks for that!

Regarding your issue, it is within the vendor library iScroll.js (forked as scrolloverflow.js). I would encourage you to open an issue in their issues forum although I believe the project is kind of dead... See a similar report in here.

Personally I would try to stop using scrolloverflow and go for a totally responsive approach by using the responsive options together with the class fp-auto-height-responsive.

jazithedev commented 7 years ago

Thank you for the response. I'll try the solution with fp-auto-height-responsive class.

Also... I think that you should clearly add in documentation something about iScroll and scrolloverflow. Maybe that this functionality is deprecated because the iScroll is dead or that the scrolloverflow is very unstable.

alvarotrigo commented 7 years ago

Maybe that this functionality is deprecated because the iScroll is dead or that the scrolloverflow is very unstable.

Yeap I agree. I'll do for the next release.