Editor bubbles in a multi-column container show up at wrong vertical offset

I have a use case where the editor is inside a multi-column container.

<div class="container">
   ...
    <tiptap-editor/>
   ...
</div>

where

.container {
 column-count: 2;
}

Expected behavior Expect to see menu bubbles in appropriate place.

Screenshots This is what I see:

https://codesandbox.io/s/48r92vy8v7

Environment

• Browser Chrome
• Version 1.16.2

[hanspagel]

Thanks for all you work on this @holtwick! We are about to rewrite all interface components, and I added your code snippets to my notes. 🙌

Closing this here for now.

[Chrissi2812]

Please use updated tip-tap (menububble position was fixed in 1.17.0) And after changing this line, it works a little bit better (not perfect though, cross column selection is broken)

- .container {
+ .ProseMirror {
 column-count: 2;
}