Why this demo broken in touch screens or webkit based touch enabled devices

[inckka]

I’m trying to implement “pull to refresh” feature on one of my front-ends.
And I’m experiment with this library: https://github.com/apeatling/web-pull-to-refresh

A nice demo can be found at http://apeatling.com/demos/web-ptr/

This demo works on Firefox and Chrome, However if I switch to inspect mode on chrome and choose some touch device from device list (e.g: iPhone 6) The demo gets break. You can replicate the issue easily by opening the above demo link with google chrome and try to pull down. It should work smoothly.
Then fire up the inspect window on chrome and refresh the page and try to pull down again, the issue can be seen.

It seems like a CSS issue on touch enabled devices. Can anyone suggest a solution for this.

[Beverleyh]

Looks like it works fine on an actual touch device.

Maybe touch emulation on desktop is just giving a false reading.

[inckka]

@Beverleyh I checked this on actual touch device using chrome browser. Its the browser which does the pull to refresh, not my script.

[Beverleyh]

I’m testing the demos you linked to in Chrome and Safari on my iPhone 6 Plus, and I see the script refresh working (3 animated dots) and also the browser refresh, depending on how quickly/hard the pull gesture is performed. The script seems to work fine, for me, on this touch device.

[Author]

Posts