Adding apple-mobile-web-app-capable stops SVG touches being recognised - javascript

I'm trying to add touch functionality to an SVG.
I recognise the touch event using a jQuery like selector.
(I'm actually using angular JQLite - angular.element()):
.on("mousedown touch", function(event) {
On my desktop and in mobile Safari, there's no issue. The touches are recognised correctly.
It also responds correctly when saved as a bookmark, but when I include:
<meta name="apple-mobile-web-app-capable" content="yes" />
in my header, and save to the home screen.. the touch piece doesn't respond.
I'm wondering whether anybody knows the root cause of this or has a a workaround?
I'm using Angular 1.2.27 and iOS 8

For info, I worked around the issue by embedding an ng-click within the SVG itself.
This would tend to point to angulars JQLite implementation of click/moousedown/touchstart being the cause or possibly not supporting the same touch events as ng-click.

Add the following lines to your css-file.
svg {
pointer-events: none;
}
Now it should work.

Related

Skrollr mobile broken. Unable to preventDefault inside passive event listener

I'm getting the following error on all chromium browsers when using Skrollr library and loading the website as mobile:
"[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>"
The library was working fine last week and now I'm getting this error on every browser I try while loading page as mobile.
Even the examples in official github are broken when loaded on mobile and show the same error.
Does anyone know how this could be fixed?
skrollr.js:730--
https://raw.githubusercontent.com/Prinzhorn/skrollr/master/src/skrollr.js
Examples with the errors from the git links:
http://prinzhorn.github.io/skrollr/examples/docu/1.html
http://prinzhorn.github.io/skrollr/examples/docu/2.html
http://prinzhorn.github.io/skrollr/examples/docu/3.html
http://prinzhorn.github.io/skrollr/examples/docu/4.html
To replicate, - load the page, inspect, choose mobile and refresh. Suddenly it all breaks and reports errors.
HTML tag should have
class="skrollr skrollr-mobile"
if detected mobile device load.
I was developing a website using this and on the 9th of July 21 afternoon I noticed that behavior has changed and that's when I noticed the errors.
I've recreated a simple website using this and saw exactly the same problem. Later on I decided to check git hub linked examples and saw the same problem.
Could it be some sort of update to the browser cores? A fix or bypass would be greatly appreciated.
Update:
I've found out that adding the following line to CSS gets rid of the errors.
* {
touch-action: manipulation;
}
Unfortunately functionality of the library is still not working at 100% on mobile. The scripts that calculate the amount of scrollable area on mobile are off and adds whitespaces to the end of the document. All scroll events are affected by this miss-calculation.
So After looking into this matter a little bit more, I've found a solution which hopefully will help all the folks using this library in 2021 onwards.
To disable the errors add the following CSS:
* {
touch-action: manipulation;
}
And finally to have proper sizing of animations and no white spaces, especially if your:
transform: translateX();
gets disabled on main scroll body when you're on mobile devices, use the below code before your closing tag.
<script type="text/javascript">
if((/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera)){
skrollr.init({
forceHeight: false
});
} else {
skrollr.init();
}
</script>
This will help all who want to imitate horizontal scrolling while using vertical scrollbar.

mobile emulation with storybook react

I'm trying to test my touchscreen swipe event listeners on a react component built with storybook, and I can't seem to get proper mobile emulation to work. The style changes I have attached to window width breakpoints work upon physically resizing the window, but when viewing the iframe mode in either the chrome device emulator, or on my phone, it just looks like a tiny version of the desktop site. It doesnt seem to work with my swipe animations either. I've done tons of googling on this, and all I've managed to find is a storybook add-on to manipulate the viewport (https://www.npmjs.com/package/#storybook/addon-viewport). I'm pretty new to developing for mobile-only options like touchscreen swipe, so any help would be greatly appreciated!
i discovered that the problem was with meta tags. to get mobile emulation to work, you have to in the .storybook folder, add a file named preview-head.html and in the file put <meta name="viewport" content="width=device-width, initial-scale=1"> then to get the emulation to work correctly, view the component as an iframe.

Disable default touch gestures in Js and Html

So I'm making a small HTML canvas application in HTML and JS, and ran into a problem with touch gestures.
I am working on allowing users to draw on a canvas with a touch screen. After adding support for multi touch I realized that the default touch gestures, such as scrolling or zooming, are still active.
I need to disable the default touch gestures for the entire page.
My first idea was to use Event.preventDefault() but it gives off an error and solves nothing.
Then I found this HTML attribute content="user-scalable=no" but that didn't work either.
So now I'm a bit stumped and would love some advice.
I know that you mentioned using event.preventDefault(), but it is a little confusing that this did not work for you, as it is the recommended way to do something like this.
Try this:
window.ontouchstart = function(event) {
if (event.touches.length>1) { //If there is more than one touch
event.preventDefault();
}
}
It does the following:
Runs whenever the user begins touching their device's screen (ontouchstart).
The function is given the event variable, which contains details about the event, including an array called touches with information about each touch in it. This array has an item for each place the screen is being pressed, so by getting it's length (event.touches.length) we get how many fingers the user is using - obviously we do not want to cancel single presses, as otherwise the user will not be able to do anything.
Finally, we call event.preventDefault() to prevent the default actions caused by these events. You could also implement your own custom actions above the event.preventDefault line.
For further information, you can take a look at this StackOverflow page.
i figured it out. the event.preventDefault() doesnt work at all but using <meta name="viewport" content="width=device-width, user-scalable=no"> this i got it to work properly. the issue was that i was using that attribute in my canvas instead of the meta so i had <canvas id="canvas" width="2000" height="2000" content="user-scalable=no">. thanks either way.
Edit: nope still not working. I was debugging on my pc with the chrome tools but seems to have had no effect on an actual touchscreen

Preventing default iOS webpage drag with javascript and hammerJS

I am creating a simple web app that uses the new version of hammerJS for pinch zooming. I am having an issue with the default iOS page drag when a pinch starts. This seams to override the pinch event that I am attempting to capture. Any help stoping this while using hammerJS would be greatly appreciated.
PS: I have attempted to use event.preventDefault() to no avail.
You need to call preventDefault slightly differently to how you may be used to. Like so:
$('#your_element').on('pinch', function(event) {
event.gesture.preventDefault();
});
See this hammer.js example for another example.
Put this in your header:
<meta name="viewport" content="width=device-width,user-scalable=no">
Basically the user-scalable property controls if users are allowed to zoom the page. So once you disable it you can control the zoom with hammerJs.
More info here https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag#Viewport_basics
What were you calling preventDefault on? I usually combine #Bertrand's answer with something like this
$(body).on('touchmove', function(e){
e.preventDefault();
});

How to stop page scrolling while....still allowing scrolling?

I'm making a mobile app with PhoneGap. I've got this--
function preventBehavior(e)
{
e.preventDefault();
};
document.addEventListener("touchmove",preventBehavior, false);
You know how you can drag a page a tiny ways off of the smartphone screen by dragging it, and then it pops right back when you release it? And all you see behind it is black? That's what this code is meant to prevent. And it does.
But it's also preventing all standard scrolling, such as scrolling through a list. Does anyone know a solution?
An easy solution for Cordova 1.7+
Locate Cordova.plist in your Xcode project.
At the top it will say “UIWebViewBounce“. Set this to NO.
you have two options:
iScroll - Super effective in giving this effect. Granted it does have it's limitations.
-webkit-overflow-scrolling:touch; a new css method introduced in ios 5 it works well but again has it's limitations within phonegap.
Personally I use iScroll for phonegap apps, it works great if you don't have a super large list of items you are scrolling. If you're looking for a more native way I would suggest the overflow-scrolling method, this has proven to cause some strange effects in the webview. Phonegap uses webview vs mobile safari so your support differs a bit.
iScroll - http://cubiq.org/iscroll-4
webkit-scrolling - http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/
You should add this in your head tag: (No need of your listener code now)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
This basically disables the scaling (zoom in/out) and that drag effect which you do not want. So the page will not be scrolled but still touchmove event can be tracked.

Categories