Jump to content

touch-action in CSS


Recommended Posts

I am on the hairy edge of my knowledge base here but i have a SMS project that when I run on a mobile device it has all the double click zooming.  It is really annoying because you may want to click buttons fast and the zoom feature get in the way.  I have read you can add

touch-action: manipulation;

to the controls to disable it for each control.   Is it possible to add this to all the controls in SMS somehow?  Is it possible to do it globally (I have read that use to be possible but later browsers started to ignore that).  Is there another way?

Thanks,

Jim

Link to post
Share on other sites
  • Moderators

The standard generated index.html should prevent what you're experiencing :

    <meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no"/>

At least on Android and iPad it does.

However there have been problems reported in mobile Safari (

     https://stackoverflow.com/questions/37808180/disable-viewport-zooming-ios-10-safari
     https://stackoverflow.com/questions/10614481/disable-double-tap-zoom-option-in-browser-on-touch-devices

If your problem is indeed linked to mobile/Safari on iPhones, then you can also disable zoom in the settings, or use a 3 finger tap :(

At the moment I don't have an Apple mobile to test the solutions in the links above, but will do soon as I get access

 

Link to post
Share on other sites
  • Moderators

This looks like a non-solvable problem.

Apparently Apple changes his/her mind often how to implement this in the various mobile iOS Safari versions and the OS hardware event checking seems to take precedence over html processing.

If you change the <body> part of the index.html file to this

<body>  <script type="text/javascript">    /* This prevents the window being moved by touches,
      to give the impression of a native app */
    document.ontouchmove = function(e) { e.preventDefault(); }

document.addEventListener("touchstart", event => {window.alert("touch event starting"); event.preventDefault();
    if(event.touches.length > 1) {
        window.alert("zooming happening");
        event.preventDefault();
    }
}, {passive: false});

      </script>

    <script type="text/javascript" src="main.js"></script>
</body>

then the problem goes away. However its a sledgehammer solution as it captures all touch events.

Depending on what touch events you need, you may be able to re-enable f.i. touch scrolling on selected elements, or channel the above from the document body and all of its children to specific elements only

 

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...