Prevent pull-to-refresh action for desktop browsers
orck-adrouin opened this issue · comments
Hello,
Is it possible to prevent the 'pull to refresh' action in Chrome and Firefox when run on a non-mobile device?
I integrated the react component in my application and it works great when using a mobile device. However when I use Chrome on my desktop and I try to select some text (therefore mimicking the pull to refresh action) the pull to refresh action is triggered.
Demo:
I do not have this behavior when using IE or Edge.
I would like to prevent/disable the component when running in a non-mobile device, is this possible?
Thanks,
Alex
Hi, thanks reporting.
Fixed with v1.5.7
Hi,
can this issue be reopened? The problem still occurs. However this time the text is not selected.
You can test it with your demo page.
Ok, I think its better to disable pull action for desktop too.
Done with: v.1.6.0. Check please.
Any chance this functionality could be added back with a flag? I can get this functionality by using 1.5.9, but it would be nice to get continued updates. Disabled by default seems like a good idea.
Hi @westbyb, just supported desktop with supportDesktop option from v1.6.2 .
Check it out, please.
@YusukeShibata desktopSupport works great!
As a note, I had some difficulty getting it working on Safari, but fixed it by adding the follow css:
#ptr + div {
left: calc(50% - 20px);
}
With #ptr being my pull to refresh content, and everything displays correctly now!
@westbyb Thanks reporting! Just fixed for Safari on v1.6.4.
@YusukeShibata The fix works! Thanks for the quick update.
For some context, I'm using your module inside of both a web app and that same web app cooked into a Cordova Android & iOS app. Here's the support I have now:
| Browser | Support |
|---|---|
| Chrome | Yes |
| Safari | Yes |
| Chrome Mobile | Yes |
| Safari Mobile | Yes |
| Cordova Android | Yes |
| Cordova iOS | No |
At the moment, I'm having an issue with the Cordova iOS browser rendering the spinner as your drag it down. The inline top css updates just fine, and inside the Safari inspector you can see the spinner is supposed to move, but the Cordova browser won't rerender the node for whatever reason. When you let go it uses the top value and displays the "hiding" animation correctly, but won't display correctly on the way down. Everything else works great though. If I find a solution for that bug I'll create a separate issue for it.
FWIW, none of the transform scaling works on the Cordova iOS browser, so maybe adding a -webkit-transform tag along with the transform will fix that, but at the moment the only styles being added to the inline pulled object are position: absolute and top: #px, with the top not updating the DOM.
I'll keep you posted, and thanks so much for your help thus far!
An update!
So, I added this to my css file to fix the top updating bug:
#ptr + div { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); }
With #ptr being my content and div being the loading wheel. This solves my issue, which is great! I've run into another issue where my POST requests no longer work once the refresh event has been fired, but I'll file a bug a separate bug against that if I find it has something to do with this module. Thanks for the flag, the support has been great!
Edit: I've been trying to figure out the issue with my POST requests failing, and I can't quite figure it out, but for the sake of information, here's the issue I'm running into.
When I go to make my HTTP requests throughout the app, I have no problems. I'm using Redux to handle all of my requests, and axios to actually call them. When I call them through the refresh callback, the function runs, as does the dispatched Redux function, but axios refuses to make the request, so the refresh spinner hangs. Once I've done that, I can't make any other calls, so I assume something in axios is getting blocked, but I'm not sure what. Combine that with the Safari debugger not letting me step through my code, and I've decided to just make the call right inside the refresh function. Not ideal, but it works. Figured I would leave this for anyone else that runs into this problem.
Hi @westbyb ,
Thanks for reporting, one question,
#ptr + div { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); }Is this fix for Cordova iOS that you reported before?
@YusukeShibata Yeah, that seems to have fixed it for Cordova on iOS. I'm sure a few other properties would work as well, but this did the trick.