I've created a web tool that enables users to annotate the page using an SVG overlay. However, when they try to write text using the tool, Apple's Scribble feature on iPads interferes and causes some unexpected behavior. I've found that disabling Scribble in the iPad settings resolves the issue, but that's not a practical solution since I want users to be able to use Scribble elsewhere. Is there a workaround to stop Scribble from interfering with my annotation tool?
2 Answers
It sounds like the issue is Scribble trying to capture your pencil strokes and turning them into text input instead of letting them pass through to your annotations. If you're able to share what the 'unintended behavior' exactly is, that might help clarify things for us!
Have you considered using CSS properties like `pointer-events: none;` or `user-select: none;` while you're in annotation mode? That might help mitigate the interaction issues with Scribble.
I have attempted that. Right now, I’m using `touch-action: pinch-zoom; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;` on the target div and children. Unfortunately, while that stops some of the interactions, Scribble still steals the events on its own, which is the main problem. I can't use `pointer-events: none;` because I need pointer events for the annotations.
That's a good point! The unintended behavior is mainly Scribble interpreting the strokes and interfering with the actual event handlers I have defined for the annotations.