Disruptive content "jumps" during collaboration

[patq]

Problem:

I have a collaborative editor using ProseMirror and YJS. When a peer (editor in a different tab) adds content to the top of the document, a user will experience, their content shifting lower in their viewport. I’ve noticed that this occurs even in the example demo code that is on the YJS Docs here as well as this Tiptap prosemirror collab scroll sandbox regardless of which browser I choose (firefox, chrome, safari).

Anyone have any insight or paths to what I should look into next?

screenshot:

---

Research:

• similar but different issues raised:
  • overcompensation when both scroll functionalities were implemented issue 933 - patch implemented
    • patch already implemented, should not be causing this issue
  • mismanaged height of containing div
    • my code is not adjusting the size of the containing div. visually, using browser inspector, the div looks consistent in size when content is added.
  • misuse of resize-detector
    • my code does not use a resizeObserver
• Browser has their own native scroll-anchoring mechanism. (available on all modern browsers except safari)
  • Guide to scroll anchoring - CSS: Cascading Style Sheets | MDN
  • W3C spec for scroll anchoring that browsers follow
• Prosemirror has internal scrolling calculations but it does not look like we are able to hit the logic even when overflow-anchor:none

What I’ve tried:

• Tried removing all custom extensions and plugins and tested the basic editor.
• A couple changes I made to allow anchoring to WORK in firefox. (but not any other browser)
  • added a unique id to each paragraph/header node to help browser identify elements during rerender.
  • added overflow-anchor: none to all surrounding elements that are not part of the ProseMirror editor.
• Confirmed that Chrome will set its scroll-anchor to the ProseMirror editor and not it’s child elements
  • I believe this is due to the w3c spec for choosing priority candidates during the anchor selection
    • chosen as anchor since contenteditable = true

[marijn]

If you can reproduce this without Tiptap and YJS, using proseMirror-collab or just plain ProseMirror primitives, I can debug it. I set up a test where I just had a timeout insert content at the top of the document, but the scroll position stayed stable there in both Chrome and Firefox.