unusual text highlight/selection behaviour

[jhackett1]

i'm seeing some unusual text highlight/selection behaviour in a table using react-virtual.

often, as i click and double-click around the table, i'll see strange groups of highlighted text like:

my cursor isn't anywhere near the start of the selection area.

as i click and drag, the selected area doesn't seem to match up with my cursor:

Screen.Recording.2022-06-06.at.12.14.27.mov

my inkling is that this is somehow related to the transform: translateY() and position: absolute css on the rows, but it seems to continue even when i remove that css.

i've tried listening for selection and selectionchange events on the dom for hints, with no luck.

i could remove the text highlight effect with css, but this is an accessibility problem i'd like to avoid.

why does this happen?