This content originally appeared on DEV Community and was authored by SkyJin
A debugging journey that led to an unexpected system-level solution
The Use Case
I've been working on drawing directly on web pages using Apple Pencil on iPad. This approach has several advantages over traditional screenshot annotation:
- Persistent positioning: Notes stay anchored to their location even when scrolling
- Dynamic interaction: Can switch between tabs to reference other content while keeping annotations
- Live web content: Works with interactive elements and real-time updates
- Seamless workflow: No need to manage separate screenshot files
This is particularly useful for online whiteboards, web-based drawing applications, study materials, and any scenario where you want to annotate web content while maintaining full page functionality.
The Problem
While using Orion Browser (which supports Chrome extensions on iPad) with the Page Marker extension, I encountered a consistent issue: when drawing quickly with Apple Pencil, certain stroke patterns would have missing segments. Specifically, rapid "vertical-horizontal-vertical" strokes would consistently drop the third stroke.
This made the drawing experience frustratingly unreliable, breaking the natural flow of handwriting and sketching.
Initial Investigation
I assumed this was a technical compatibility issue and investigated several potential causes:
- Browser extension compatibility: Orion's Chrome extension support might have limitations
- Touch event throttling: Mobile browsers might be dropping rapid touch events for performance
- Apple Pencil gesture conflicts: System-level gestures might be interfering
- Canvas API limitations: WebKit might have restrictions on rapid drawing operations
The issue was consistent enough that I started planning to develop a custom Safari extension to work around these perceived limitations.
The Debugging Process
I dove deep into:
- Apple Pencil touch event handling in Safari
- iOS Safari extension development APIs
- Canvas drawing optimization techniques
- Touch event debugging using Safari's Web Inspector
I even set up an Xcode project and began exploring the Safari Web Extensions framework, convinced I needed a native solution.
The Unexpected Discovery
While testing different Apple Pencil settings during development, I discovered that disabling iOS Scribble completely resolved the issue.
This was surprising because I was drawing on Canvas elements, not text fields where Scribble would typically be expected to work.
Why This Happens
Scribble operates at the iOS system level, monitoring Apple Pencil input globally across all applications and contexts. When it detects stroke patterns that might be handwriting, it intercepts the touch events for text recognition processing.
The "vertical-horizontal-vertical" pattern I was drawing was likely being interpreted as potential text input (possibly the letter "H", number "4", or editing gestures), causing Scribble to capture the third stroke before it could reach the Canvas drawing API.
The Solution
Settings → Apple Pencil → Scribble → Off
This immediately fixed the dropped stroke issue, making Canvas drawing smooth and reliable.
This content originally appeared on DEV Community and was authored by SkyJin
SkyJin | Sciencx (2025-07-12T07:38:28+00:00) iPadOS Scribble Interfering with Apple Pencil Canvas Drawing in Web Browsers. Retrieved from https://www.scien.cx/2025/07/12/ipados-scribble-interfering-with-apple-pencil-canvas-drawing-in-web-browsers/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.