switgching between preview mode and normal edit - the layers get out of sync

[bwl21]

[panphora]

I've investigated this issue and created a comprehensive test suite for mode switching (12 tests covering content preservation, cursor position, newlines, rapid toggling, etc.). All tests pass, which means I cannot replicate the synchronization issue programmatically.

This suggests the bug may be:

• Browser-specific behavior that doesn't occur in the test environment
• Timing-related (async rendering, DOM update delays)
• Related to focus/blur events
• Related to scroll position affecting layer alignment

To help debug this, could you provide:

1. Which browser and version you're using?
2. The exact steps to reproduce (what content, what sequence of mode switches)?
3. Does it happen consistently or intermittently?
4. Does refreshing the page fix it temporarily?
5. If possible, a screen recording showing the exact steps?

The test suite I created will help prevent regressions once we identify and fix the root cause.

[panphora]

Update: I've added 3 more tests that specifically simulate the exact scenario you described:

Test 13: Incremental content across mode switches

• Start with initial content
• Switch to plain mode → add content
• Switch to preview mode → switch back to normal
• Add content in normal mode
• Switch to plain → add content
• Switch back to normal
• Verify content and line alignment

Test 14: Character-by-character typing across modes

• Type 'a' in normal
• Switch to plain, type 'b'
• Switch to preview and back
• Type 'c'
• Add newline in plain mode
• Add 'd' in normal mode
• Verify alignment

Test 15: Cursor position after incremental edits

• Type, switch modes, add newlines, switch modes, type more
• Verify cursor position and line count match between textarea and preview

All 15 tests pass, so the synchronization logic itself is working correctly in the test environment. This strongly suggests the issue is specific to real browser rendering or event handling that isn't captured in the jsdom test environment.

[bwl21]

1. Which browser and version you're using?

Chrome on macos

3. The exact steps to reproduce (what content, what sequence of mode switches)?
   see the gif in the initial report

it happend on https://overtype.dev/demo you need to do exactly the same as in the animated gif:

• edit somthen near the bottom
• Switch to preview
• retuirn
• klick to the sa eloackn

5. Does it happen consistently or intermittently?

consistntly

7. Does refreshing the page fix it temporarily?

no

9. If possible, a screen recording showing the exact steps?>

see the sreen recoring abbove

12. The test suite I created will help prevent regressions once we identify and fix the root cause.

thanks for your effort

[matteocontrini]

Firefox 143.0.1 on macOS, I'm seeing this consistently too. The problem occurs only if you scroll the preview and then go back to edit mode.

CleanShot.2025-10-01.at.12.00.19.mp4

[panphora]

I think the issue here is that the scroll position between the textarea and the preview it overlays isn't synced when you go back to Normal Edit mode. I will fix this.

[panphora]

This should be fixed in v2.0.0, where we ensured the scroll positions of the textarea and preview panel always stay in sync — especially when switching modes.

[panphora]

I did the best I could to test OverType before the v2.0 release, but please test it thoroughly and report bugs. I changed a lot and I only have so much bandwidth to test myself.