2

I have a html/js/canvas drawing app, and after updating to iPadOS 14, I can no longer fast tap with the Apple Pencil. If I use a mouse or my finger with this code the events fire fast and toggle every time. When I use the Apple Pencil, the handleStart() does not get called, which is obvious with on-screen log. Sometimes it even shows handleEnd() while the pencil is on the iPad. (Try snippet on iPad with Apple Pencil fast tapping, then use finger or mouse)

Did anyone else see this new problem in their web apps or know a possible work around? Or can anyone just test with their ipad and pencil to confirm this bug? Using finger is fast response, pencil misses rapid fast touches and slow response time. I tested on an older iPad with iPadOS 13 and the pencil works fine with fast touches. So I don't think its hardware.

I did some testing on this drawing site (https://drawisland.com/device) and it doesn't seem to have the same problem (I can tap fast and it draws every time) so I wonder if they are handling events differently or have something set to a Apple Pencil or Stylus mode.

Thanks

document.onpointerdown = handleStart;
document.onpointerup = handleEnd;

//document.ontouchstart = handleStart;
//document.ontouchend = handleEnd;

function handleStart(e) {
  document.getElementById("log").innerHTML = "handleStart() "
}

function handleEnd(e) {
  document.getElementById("log").innerHTML = "handleEnd()"
}
body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<html>

<body style="background-color: aqua; font-size: 26px;">
  <div id="log">LOG</div>
</body>
</html>

<script>
</script>
The Way
  • 594
  • 5
  • 15

2 Answers2

2

I found the fix by going back to touch events from pointer events, and adding e.preventDefault(). I have seen preventDefault() many times and even have it in some of my code, but before iPadOS 14 it was not required for fast tapping. I think they may have changed many things with the Apple Pencil because of all the new features for hand writing in input fields, etc.

This will now only work on touch devices.

document.ontouchstart = handleStart;
document.ontouchend = handleEnd;

function handleStart(e) {
e.preventDefault()
  document.getElementById("log").innerHTML = "handleStart() "
}

function handleEnd(e) {
e.preventDefault()
  document.getElementById("log").innerHTML = "handleEnd()"
}
body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<html>

<body style="background-color: aqua; font-size: 26px;">
  <div id="log">LOG</div>
</body>
</html>

<script>
</script>
The Way
  • 594
  • 5
  • 15
2

I hit the same issue some time ago and found a hack work around, just add preventDefault on a touchmove. That seems to fix it for now.

more details here

mikepk
  • 524
  • 4
  • 8