As workaround I have created this styling:
.t {
/* making selection to behave nicer when selecting text between multiple text lines (to avoid element gaps which can cause weird selection behavior) */
padding-bottom: 100px;
margin-bottom: -25px;
/* making selection to behave nicer when selecting text between multiple columns (useful for pages with 2 or more text columns) */
padding-right: 2000px;
}
Problem is that all text elements are absolute positioned and whenever mouse (during selection) leaves text element it fires mouse events on page element (which causes to select text from beginning of page to the starting point) until other text element is reached.
This styling/workaround "fills" those gaps so mouse never reaches page element.
Document should look the same.
Edit: Be aware that this solution relies on proper DOM structure (text elements are ordered). In some scenarios text can become unselectable (eg. when page contains 2 text columns and first text block is actually placed as last child in DOM).
If you get into such problem, try adjusting values to fit nicely in your document, like below:
.t {
/* making selection to behave nicer when selecting text between multiple text lines (to avoid element gaps which can cause weird selection behavior) */
padding-bottom: 40px;
margin-bottom: -10px;
/* making selection to behave nicer when selecting text between multiple columns (useful for pages with 2 or more text columns) */
padding-right: 0px;
}
Selection might jump here and there (again depends on document structure and used values), but still it will be a lot better compared to original state.