Disruptive content "jumps" during collaboration


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?


jumping content yjs doc example


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
1 Like

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.

1 Like