I'm trying to use http://wipetouch.codeplex.com/ to implement swiping on a Meteor app to shift between templates in Iron Router.
It works beautifully on iOS and Android but on Windows Phone, the OS' native swipe gesture (swiping right in the browser moves one page back in history) interferes with the user's swiping action.
Is there any way I can disable this?
Also which other platforms have similar functionality which would prevent the user from swiping in the web app effectively?
As an example, this app also uses the same library to implement swipe gestures.
Note: Using touch-action: none on the body tag does not work.
I encountered the same problem on a little web application : it which was a scratch game, where the player had to swipe the finger all over the "scratchable" zone to discover what he had won.
The game was supposed to run on Windows 8.1 tablets, with IE10 on it.
We put in the css this snippet :
*{
touch-action: none;
}
The result is to completely deactivate any touch events on the app (including the swipe backward / forward).
But we had to reactivate the touch event only on the scratch zone, to allow the player to play :)
For this we had to add this :
#playzone{
touch-action: chained;
}
The app still works perfectly, both on IE10 on tablets but also on Windows Phone 8.1.
(please forgive my English, it's not my mother tongue)
EDIT : After having tested more on IE, it seems that adding the touch-action:none; on the html element is enough to achieve what the OP wanted.
Related
I have a webgl game working fine on iPad Safari
I can disable system pinch / zoom actions with usual solutions (like this one: disable viewport zooming iOS 10+ safari?)
But I can't get any to work after the game is switched to fullscreen with document.body.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)
I have touch-action: none;, user-scalable=no in meta, passive: false and e.preventDefault(); for all touch events (touchstart, touchend, touchmove, touchcancel)
Edit: here's a codepen with most things I've tried: https://codepen.io/SerialF/pen/BaaRKJN
Have you made any progress on this? I am running into a similar issue with a three.js built on angular application. Can't figure out how to disable the exit full screen on an ipad in safari when pinch-zoom-out. I found that Chrome doesn't support full screen on ipad, I tried disabling touch events, e.preventDefault() on a touchstart listener. I can not find where the exitFullScreen is being called, seems like it's just built into the OS and is completely independent from the DOM.
UPDATE: Not a 100% solution but thanks to Florent for bringing this workaround to my attention.
"They do suggest to add a shortcut to home screen, as with all the required PWA meta-tags (see here), this is the only way to have fullscreen working properly"
In iOS Safari these days, the user can trigger a system BACK or FORWARD by swiping from the far left or right of the screen.
What I'm wondering is if there's a way to detect this condition (from JavaScript), while it's happening (as well as after the history navigation has occurred). That is, distinguish it from a swipe that is not causing system behaviors, and distinguish the end navigation from one triggered by a back button.
I see that there may have been a hacky way to detect whether the navigation on iOS7 was triggered by swipe or not (based on a bug about missing the touchend), but I'm not sure that method works anymore in iOS 9+. Also, it doesn't tell me during the swipe what is going on (I ideally need to suppress my touchmove handlers while the System is doing its thing...).
My app uses HTML5 canvas and uses Cordova to build an .apk file.
I have tested my app on 5 devices running varying versions of Android OS and of varying hardware capabilities. The only one which lagged was a Samsung Galaxy Ace 2, running Android 2.3.6 Gingerbread. I believe it is an OS issue because phones tested with similar/worse hardware do not lag.
When the screen is touched and remains touched, the lag is greatly reduced. I noticed that pixels seem smoothed or anti-aliased when the screen is not touched but more pixelated when the screen is touched, I believe this to be causing the lag. I prefer less pretty with no lag than the opposite. My javascript does not cause this to happen, and so I am stuck on how to resolve it.
The following did not solve the problem:
context.imageSmoothingEnabled = false;
and using CSS image-rendering settings did not help.
The javascript has touchstart, touchend and touchmove event listeners so I attempted to hack my way by faking the touchmove event even if the user was not touching the screen, although I couldn't get this working and it's not a very elegant solution anyway.
I have had this problem for weeks and want my apps to work on all devices.
Does anyone have any suggestions?
Thanks, George.
I am new to jQuery Mobile, and I am trying to replicate a native iOS app.
The problem I am facing is the that I cannot find a way to smoothly swipe between pages which is common on iOS. In jQuery Mobile, it seems to register a swipe occurred and then swipes the page for you, but I like the feel of having the page follow your swipe.
In iOS, you could use a UIScrollView with page control, but it was also really easy to do yourself by listening to touch events in a UIView.
Are there any libraries/packages that will help me create smooth swiping transitions? If not, are there jQuery bindings to track where the finger is on screen as it moves, so I can move the page and create such a transition myself?
Thanks
I have a need to create a part of a mobile web page that can scroll on its own (even though I tend to disagree with that being a good thing on mobile). The standard method is to set it to overflow: scroll and there you go.
Alas, on iOS one needs to use two fingers to scroll that area which many still feel is unintuitive. This will be fixed in iOS5, but until then, I need to support it with one touch.
So I found a few JS options. One is Scrollability. The catch is that it only supports iOS. In addition to iOS I need to support android, BlackBerry OS6 and Nokia. So that one is out.
I then tried iScroll. This works pretty well. The catch, for me, is that it does this through pure JS in that you never see a native scrollbar. As such, the scrollbar it generates is more of a dummy in that there's no way to make it work with a mouse or keyboard.
So, the question: Is anyone aware of a JS solution for creating a scrolling div on a mobile web page that a) allows for one-touch scrolling on touch devices and b) uses a native scroll bar to enable keyboard devices?
If there isn't one, we can revert to device detection, giving touch devices the JS and keyboard devices the scrollbar...though that still leaves us the issue of some touch devices also having keyboards.