Touch events available in Safari? - javascript

A friend and I were discussing Mozilla's latest touch support and got on the question of what Safari provides for this. Searches seem to turn up nothing.
Do you know of anything that provides touch events to Safari on desktop, either via multitouch trackpad or direct screen interaction (I guess a Windows multitouch environment would be the only relevant case here.)?

No, there is currently no support for touch events in the desktop version of Safari.
According to this documentation it is only supported on iOS 2.0 or later.

Related

Javascript Touch Force on iPhone

I have implemented reading the touch force for haptic touchscreen as per https://developer.mozilla.org/en-US/docs/Web/API/Touch/force
If I test in chrome debug tools on a PC (set to mobile) then it will register the force as 1 (as far as I can tell there's no way to simulate a different pressure). So I know the code it correct.
However on my iPhone XR which does have a haptic screen it always registers as 0.
The compatibility table says Safari on iOS support it, and I haven't been able to find anything that says you need to request the user permission for the feature (like you would with device orientation).
Any ideas why it isn't working?
on caniuse you have more details on support for iOs Safari, please check your safari iOs version is >= 14.5.

Scrolling differences on Safari and Chrome (iOS) can you test for them?

It used to be (before iOS 8) that Safari couldn't natively animate on scroll, you had to stop scrolling to see the animations. Safari solved that issue, but when accessing the same website on Chrome (running in iOS) the issue persists. I read that chrome hasn't yet updated this on iOS. I know that it works great on Android... so... Is there a way to test for this "feature" either with modernizr or other js? I would like to disable animations on scroll if they are not supported. I've been able to accomplish this by checking which browser the user is using, but it would be easier if I could just check whether the functionality is available.
Before iOS 8, iOS would pause painting while the user was scrolling. This behavior was discontinued for applications using WKWebView but remains for browsers using UIWebView — this is why you only see the old behavior for certain third-party applications.
One approach is to detect whether your page is loaded inside WKWebView or not. An answer to another question suggests testing for indexedDB support. indexedDB is the only HTML5 feature difference between the WKWebView and UIWebView.
The snippet from the other answer suggests how to do this:
if (navigator.platform.substr(0,2) === 'iP'){
//iOS (iPhone, iPod or iPad)
if (window.indexedDB) {
//WKWebView
}
}

Get continuous scroll events in iOS Chrome

In Safari Mobile on iOS <8, all Javascript was paused while the user was scrolling. Since the release of iOS 8, this is no longer the case, as you can read here:
http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/
This is great news. Executing Javascript while scrolling (if done right), opens the possibility for many usability enhancements (like sticky menus) and effects (like parallax).
Is there a way to get the same thing in Chrome Mobile on iOS?
The same website states that the first mobile browser that supported live scroll events was Chrome on Android 4.0. If that's the case, why is it still disabled in the newest Chrome on iOS?
This might be the answer:
https://code.google.com/p/chromium/issues/detail?id=423444
If the new Javascript handling is tied to the new Nitro Javascript Engine used in Safari Mobile (and in WKWebView), then we will have continuous scroll events in Chrome Mobile as soon as they switch to use WKWebView instead of UIWebView.
EDIT: As of version 48.0.2564.87, Chrome uses WKWebView on iOS, and continuous scroll events are working!

Web-app on iOS8 doesn't transfer Touch events to iFrames

In a web-app, on iOS 8.1, touch events (touchstart, touchend, etc.) don't seems to be transferred to iFrames, but on the same device in Safari they are.
I tested the same web-app on iOS 7 and again, the touch events are transferred to the iFrame perfectly. So basically, the problem seems to be directly related to iOS 8.
Unfortunately, I didn't found any documentation on the subject.
Anyone have encounter the same problem, found a workaround or know if there is an official bug report?
Thanks

Simulating touch events on a PC browser

I am developing an HTML application for the iPad. As such it utilizes touch events and webkit-CSS animations.
Up until now I have used chrome as my debugging environment because of it's awesome developer mode.
What I would like is to be able to debug my Html/JavaScript using Google-Chrome's debugger on my PC while simulating touch events with my mouse.
My site does not have any multi-touch events and no mouse events (no mouse on iPad).
I am not actually interested in seeing the applications layout, but more in debugging its behavior.
Is there some plugin to get mouse events translated into touch events on a desktop browser?
As of April 13th 2012
In Google Chrome developer and canary builds there is now a checkbox for "Emulate touch events"
You can find it by opening the F12 developer tools and clicking on the gear at the bottom right of the screen.
For now (Chrome ver.36.0.1985.125) you can find it here: F12 => Esc => Emulation.
The desktop browser can simulate touch events by importing additional JS + CSS.
Take a look at:
addTouch
Phantom Limb
Another way to simulate multi touch on a desktop browser is the Touch Emulator of Hammer.js
We use this script: http://code.google.com/p/jquery-ui-for-ipad-and-iphone/
It will allow all mouse events in your application to be triggered by touch events instead. So, since we already had a web application that used right-clicking, drag-n-drop etc. it allowed us to perform all of the same functionality with touch.
I know it's almost the reverse of the simulation you were looking for (you will have to script your application to primarily be used by a mouse) but I hope it helps anyway.
If you're targeting Webkit specifically (iPad and all), you can rely on normal event handler code (add/removeEventListener). With that in mind, you probably need to just branch on a few events - e.g, 'ontouchstart' becomes 'onclick' based on the environment.
Offhand I don't know of any libraries providing this level of branching, though. Pretty easy to do yourself.

Categories

Resources