Safari: Selection Extension causes selection corruption when blurring/focusing editor

[wyatt-contio-ai]

Affected Packages

@tiptap/extensions (Selection extension)

Version(s)

3.12.0

Bug Description

Description

The TipTap Selection extension fails on Safari when transitioning between blurred and focused states, particularly when re-focusing onto a separate node that was not originally selected. The editor's DOM selection becomes corrupted or lost, particularly when selections span multiple nodes (paragraphs, list items, etc.).

Environment

• Browser: Safari (all recent versions)
• Extensions: @tiptap/extensions (Selection extension)
• Editor Setup: Using Y.js/Ydoc for collaborative editing with multiple block node types (paragraphs, bulleted lists, etc.)

Bug Behavior

Works correctly in:

• Chrome
• Firefox
• Edge

Fails in:

• Safari (macOS)
• Safari (iOS)

Root Cause Analysis

The issue occurs due to a timing conflict between Safari's selection API and DOM mutations:

1. Editor is blurred with an active selection
2. Selection extension creates decorations (DOM elements are added)
3. User clicks to refocus the editor
4. editor.isFocused becomes true
5. Selection extension returns null decorations
6. DOM elements are removed
7. Safari's selection API still holds references to the old DOM positions
8. Selection change event processes → conflict/corruption occurs

Safari's selection API doesn't handle DOM mutations during focus/blur transitions as gracefully as other browsers. The engine maintains internal references to DOM nodes that have been removed or mutated by the decoration changes.

Steps to Reproduce

1. Create a TipTap editor with the Selection extension enabled
2. Add content with multiple paragraphs or list items
3. Select text that spans across multiple list items or list + paragraphs (block nodes)
4. Click outside the editor to blur it (decorations should appear)
5. Click back inside the editor to focus it, but click on a spot where selection was NOT originally created
6. Observe: Safari adds odd native selection/highlighting in-between list items/paragraphs (see picture):

Original selection

On blur (works as expected):

Re-focusing (clicking back into the editor) into the paragraph below, not into the original list:

Related Issues

• ProseMirror has documented similar Safari issues with DOM mutations during focus/blur events
• There's a known 5+ year Safari bug with selection reporting in shadow DOM contexts

Additional Context

This appears to be a Safari-specific limitation with how the browser's selection API handles DOM mutations during focus transitions. The issue is exacerbated when using Y.js/collaborative editing with complex document structures containing multiple node types.

Would appreciate guidance on the preferred approach for handling this... should the Selection extension include Safari-specific workarounds, or should this be documented as a known limitation with a recommended alternative extension? Maybe I have something wrong?

Browser Used

Safari

Code Example URL

No response

Expected Behavior

Selection should be preserved and decorations should apply/remove cleanly without corrupting Safari's internal selection state, matching the behavior in Chrome/Firefox.

Additional Context (Optional)

No response

Dependency Updates

• Yes, I've updated all my dependencies.