Search code examples
iosiphoneformswebkit

HTML input on iOS - Really Weird Behaviour


i have search through the topics and most of the answers related to cordova builds.

https://www.dropbox.com/s/j6dbg8pjhfv1mb0/ScreenRecording_07-25-2018 20-48-31

have a look at the URL below, this is a live site so please feel free to inspect it if you wish.

This is issue is strictly on iOS, i think this has something to with -webkit-overflow-scrolling: touch; but when this applied this causes the issue you see on the video.

Has anyone dealt with this this before, because i am really struggling with it.

I really appreciate any advice or help.

Essentially i want to enable smooth scrolling and not have it affect the form inputs.

Addition

This doesn't happen on android or desktop browsing.

Also if anyone has any good recommendations for out of the box remote debugging inspectors they are welcome too. Tried to use ngrok, but need to do config to get it working each time.


Solution

  • Finally figured this out, it was because of the mousewheel event not being passive, yes i was complete noob at this.

    For those who want more information making events passive, google developers have a great little guide tha explains what needs to be done.

    https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners