Apple Pencil support in Safari

The iPad Pro does not have a 3D Touch display, therefore it cannot measure the force/pressure of a touch without the Apple Pencil. 3D Touch is only available on iPhone 6S (Plus). This has nothing to do with your app or web app.

Ok. Thanks for your reply.

No 3D touch is actually fine. I just need to get regular touch (without pressure sensitivity) to work.

Right now, when regular touch is used, nothing happens, as force is 0 (default) and hence detected as no pressure.

Note that when using the Apple Pencil it can also return a "force" of 0. So I suspect this is valid.

So either I have to 1) disable Pencil pressure sensitivity, or 2) Ignore regular touch.

However, none of those options sound very appealing.

So to rephrase: Is there any way to detect if a touch event is coming from regular touch or from the Apple Pencil, or better yet,

if "force" is updated and accurate?

Thanks a bunch.

Best,

-karma

When looking up force in the draft spec: https://w3c.github.io/touch-events/

force of type float, readonly

a relative value of pressure applied, in the range 0 to 1, where 0 is no pressure, and 1 is the highest level of pressure the touch device is capable of sensing; 0 if no value is known. In environments where force is known, the absolute pressure represented by the force attribute, and the sensitivity in levels of pressure, may vary.

I find it odd that force is 0 when no value is known, when that value is also valid when a value IS known.

As far as I can see, there are no other touch attributes that can tell me if this is a stylus, except perhaps the radiusX and radiusY attributes,

but to me that seems like a hack.

I have been looking at the 3d touch spec as well. But the 3d touch events do not seem to fire in Safari, at least not when using the Apple Pencil.

I just checked, and it seems the radius attributes are not defined, so the hack I mentioned is not even possible.😕

If anyone has any idea on how to support the pressure sensitive Apple Pencil, while still supporting regular (non-pressure sensitive) touch in Safari,

I would be happy to hear from you.

Thank so much.

Ok, seems the problem is larger than expected.

So when adding my webpage as a web app (that can be launched from homescreen), "force" pressure doesn't work at all.

Wether I use the Apple Pencil or regular touch, it always returns 0.😮

This is with iPad Pro/Safari on latest iOS 9.2.1.

For reference I briefly looked at the PointerEvent spec. They seem to have solved this particular issue by returning 0.5 pressure on events that don't

support pressure:

pressure of type float, readonly

The normalized pressure of the pointer input in the range of [0,1], where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively. For hardware that does not support pressure (such as most traditional mouse and trackpad inputs), the value must be 0.5 when in the active buttons state and 0 otherwise.

I realize the current spec is draft, but as I would really like to support pressure on iPad with the Apple Pencil, I'm looking forward to learn how Apple wants to solve this issue? So far it doesn't seem doable.

Thanks so much for any reply.

I just want to follow up on this in case anyone has the same issue.

To support both pressure sensitive touch (Apple Pencil) as well as regular touch, I ended up with this simple workaround:

var pressure = 0.0;

// on touch event...

if (typeof(e.touches[0]["force"])!="undefined")
{
  if (e.touches[0]["force"]>0)
  {
    pressure = e.touches[0]["force"];
  }
  else
  {
    if (e["type"]=="touchstart")
      pressure=1.0;
  }
}
else
{
  pressure = 1.0;
}

The key observation that I initialliy didn't realize, is that touchstart is always non-zero on touchstart when using the Apple Pencil.

Hence, the above code reads the pressure, and ignores any (touchmove) events with zero pressure.

For regular touch however, pressure is set to 1.0. This works for me in Safari as well as in WKWebView.

Do note that for consistency with the PointerEvents spec, if you wish to add support for IE11+/Edge, Chrome (in development), Firefox (in development), and Opera, the pressure should default to 0.5 instead of 1.

Reference: https://www.w3.org/TR/pointerevents/#widl-PointerEvent-pressure
Reasoning: https://www.w3.org/Bugs/Public/show_bug.cgi?id=20109#c2

Unfortunately I noticed that on 3d Touch devices like the iPhone 6S, force is define and gives values indistinguishable from an Apple Pencil.

Anyone figured out how to detect that it is an Apple Pencil and not 3D Touch?

I guess we can detect if it's iPhone or iPad, but if Apple releases an iPad Pro with 3d Touch that will break it.

Yeah this is definitely the case. Sad day.

Also, we should ask Apple to add subpixel resolution to the touch event coordinates. Right now the coordinates is quantized to 1 logic pixel, so the strokes from the apple pencil is quite jittered.