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:
- Visit my code pen or clone my example project
- 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.
- 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?