TextSelected + Peripherals sometimes struggle in Safari/Firefox

[JayPanoz]

As initially discovered in #170 (comment), we sometimes have an issue where Safari and Firefox are inconsistent with Chrome when creating a BasicTextSelection.

This is noteworthy with Decorators, which helped surface this issue.

They will return something like this for the last paragraph of text and the image in:

<p>Et nous roulâmes, et nous eûmes bientôt dépassé la mystérieuse fenêtre, que je vois toujours dans mes rêves, avec son rideau cramoisi.</p>
<img src="images/p91.png" alt="decoration" class="center" id="d2e891" />
<a id="page..92" class="numero-de-page"></a>

Logged:

Range
collapsed: false
commonAncestorContainer: <div>
endContainer: #text " "
assignedSlot: null
baseURI: "https://publication-server.readium.org/webpub/Z3M6Ly9yZWFkaXVtLXBsYXlncm91bmQtZmlsZXMvZGVtby9sZXNfZGlhYm9saXF1ZXMuZXB1Yg/OEBPS/content-7.xht…"
childNodes: NodeList [] (0)
data: "↵↵"
firstChild: null
isConnected: true
lastChild: null
length: 2
nextElementSibling: <img id="d2e891">
nextSibling: <img id="d2e891">
nodeName: "#text"
nodeType: 3
nodeValue: "↵↵"
ownerDocument: #document
parentElement: <div>
parentNode: <div>
previousElementSibling: <p>
previousSibling: <p>
textContent: "↵↵"
wholeText: "↵↵"

Instead of

collapsed: false

commonAncestorContainer: div

endContainer: text
assignedSlot: null

baseURI: "https://publication-server.readium.org/webpub/Z3M6Ly9yZWFkaXVtLXBsYXlncm91bmQtZmlsZXMvZGVtby9sZXNfZGlhYm9saXF1ZXMuZXB1Yg/OEBPS/content-7.xhtml"

childNodes: NodeList []

data: "\n\n "

firstChild: null

isConnected: true

lastChild: null

length: 3

nextElementSibling: a#page..92.numero-de-page

nextSibling: a#page..92.numero-de-page

nodeName: "#text"

nodeType: 3

nodeValue: "\n\n "

ownerDocument: document

parentElement: div

parentNode: div

previousElementSibling: img#d2e891.center

previousSibling: img#d2e891.center

textContent: "\n\n "

wholeText: "\n\n "


Note previousSibling and nextSibling, where they do not catch the anchor a#page..92.numero-de-page properly, but the img as the last sibling.

It may indirectly be because of columns, as it will be fine if we append a virtual column at the end – and the issue appears when we do not.

If the image is the previousSibling, Decorator falls back to the overlaid div implementation as it could query an image into the requested range.

If the image is the next one, it uses the highlight API, and Safari will try to handle it through the API for instance, instead of ignoring it:

Firefox won’t try to highlight it.

In any case, this is not a complete analysis of the issue, only a hint that there is an inconsistency.