Odd text selection behavior when cursor leaves the parent container

I am running into some strange behavior in our Vue app when, using TipTap and ProseMirror, when the editors parent element has been translated.

I’ve created a video showing the behaviour here

To summarize the cursor behaves as if it’s lower on the page than it actually is, when placed outside of a translated parent container during text selection.

Steps to reproduce:

  1. Visit my code pen or clone my example project
  2. Highlight any editor text and move the cursor to the left or right of the grey container, while staying aligned with the same row of text.
  3. The selection will appear as if the cursor is lower on the screen by the same amount as the translated container.

I am unable to remove the translateY in our application, and the value changes on other app conditions.

Is this a bug in ProseMirror or TipTap, or is there a workaround?

That’s the native browser behavior, not something that’s implemented in ProseMirror or TipTap.

1 Like