How to fix iOS 7-8 safari prevent touchmove bug? - javascript

I have found a strange bug in iOS 7-8 Safari browser.
I set preventDefault() for touchmove event for all elements on the page.
At first all looks good, but in Safari in bottom of window, where navigation bar appear, when this bar is hidden, if i try to scroll page in that place - page will scroll with ignoring preventDefault for touchmove event.
How I can fix that?
Here is a demo. I set 3 seconds delay for preventDefault(), because you need scroll page slightly down in order to navigation bar became hidden.
sanex3339.github.io/safariWTFISGOINGONo

Related

IOS firing multiple event cycles

I have built a carousel that disables vertical scroll if scrolling horizontally on the page, and disables horizontal scroll of the carousel if scrolling vertically on the page. This works as intended on Android but not on iOS.
I'm noticing on iOS that when I look at the dev tools (using browserstack to spoof) I'm getting multiple event cycles firing (touch start, touch move, touch end) if the user swipes. They always fire as a complete set. They all fire even if the user hasn't actually removed their finger. The longer the swipe, the more cycles of these events fire. Why is this happening? My theory is that this multi fire is the problem for why my disable scrolling functions aren't working.

Pages in qt webengineview cannot be scrolled by touch

I have a 32-bit qt program of webengineview (qt version is 5.14.2), running on a computer with win10 system, and the computer has a touch screen. At the beginning, I could zoom in and out of the page with touch gestures, and I could scroll the page, but after zooming in and out a few times, both zooming in and zooming out didn't work, and I couldn't scroll the page. But elements on the page can be clicked.
By print the events in js, both touchstart and touchmove events are received, but there is no scroll event. Under normal circumstances, a scroll event will be triggered after touchmove.
How can I fix this problem?
How is the scroll event triggered?
Why can it be triggered at the beginning, but after zooming in and out multiple times, the scroll event cannot be triggered?
I also tried it in the demo simplebrowser in qt, and this problem also exists. The phenomenon of the problem is that the webpage displayed in qwebengineview cannot scroll when the finger slides on the touch screen sometimes.
I added listener for touch-events in JavaScript,
document.addEventListener('touchstart',function (event) {
console.log('touchstart') })
document.addEventListener('touchmove',function (event) {
console.log('touchmove')})
document.addEventListener('scroll',function (event) {
console.log('scroll')})
touchstart and touchmove print when finger slides on touch screen, but scroll event doesn't print.

Disable zoom on websites for iOS 12+

I am looking now for days for a working code to disable the iOS zoom for websites.
I also found this:
disable viewport zooming iOS 10+ safari?
The fixes may work for iOS 10 but seems not to work for iOS 12. I already found a website where the zoom is disabled successfully but I am not able to find out how they have done it.
I know that Apple removed the possibility to disable the zoom via viewport-meta tag but there must be a workaround to disable it for a website.
For our website its essential that the zoom is disabled or that the zoom does not trigger a resize event. Any ideas how to solve this?
What I have tried already is e.g. to prevent touchmove / ontouchstart / gesturestart ... nothing of them worked.
Double tap zoom can be disabled by adding an empty click event listener on your elements.
Disabling pinch to zoom is a pain, you have to prevent touchstart event if event.touches > 1, but this only works when page is not momentum scrolling
See my answer.

How resolve problem with the scrolling site?

Good day.
There is a page CSS/HTML - http://promocodesoft.com/q/kupon.html
And when I scroll through this site on an iPhone, or on an iPad (only on Safari browser), it scrolls very slowly, unlike other devices. I think the problem lies in JS of something else?
That is, when I scroll through any site and let go of my finger, then by inertia the site scrolls itself for some time. But on Apple devices there is no such inertia. Scrolling stopped immediately when I removed my finger.
What could be the problem?
see video how it works - https://www.youtube.com/watch?v=Fqkr-qKzfl8&feature=youtu.be
You need to add the following CSS to the page to make the scrolling smooth in Safari on iOS devices:
body {
-webkit-overflow-scrolling: touch;
}
The page seems to set the overflow-scrolling to auto, which makes the scrolling stop immediately after releasing the finger from the screen.

iOS Webkit detect swipe and drag events on scrolling element with Javascript

I have a UIWebView containing a <ul> with overflow:scroll and -webkit-overflow-scrolling: touch set.
When a user interacts with the element and the touchend event fires I want to know if this is the end of a drag/pan or the beginning of momentum scroll due to a swipe.
Is this possible?
The reason I want this is so that when the drag or momentum scroll has finished, I can line up an <li> at a certain point.
Basic setup without solution in this codepen.
I tried using Hammer js to detect swipe and pan gestures, but this stops momentum scrolling from occurring on the element as far as I can tell.

Categories