Highlight issue - note icon location

[mrifni]

What happened?

Tried to highlight multiple words and note icon shows fine first time. But occasionally when open the book multiple times icon renders on the text itself.

How to reproduce?

Add a highlight and close and open the book few times.

Environment

Latest develop branch

Development environment

• OS: macos
• IDE: Android studio arctic fox

Testing device

• Android version: 10
• Model: One Plus 5
• Is it an emulator? No

[mickael-menu]

I guess this could happen if the resource is not fully laid out before applying the highlights. I added a requestAnimationFrame but it's not a silver bullet.

// Using requestAnimationFrame helps to make sure the page is fully laid out before adding the
// decorations.
requestAnimationFrame(function () {
    let group = readium.getDecorations('highlights');
    group.update({"id":"16-highlight","locator":{"href":"\/OPS\/title.xml","type":"application\/xhtml+xml","locations":{"progression":0,"position":2,"totalProgression":0.0033444816053511705},"text":{"before":"The ","highlight":"Great","after":" Gatsby\nFrancis Scott Fitzgerald\n\n\nPublished: 1925\nCategorie(s): Fiction, Literary, Romance\nSource: http:\/\/ebooks.adelaide.edu.au"}},"style":"org.readium.r2.navigator.Decoration.Style.Highlight","element":"\n                    <div class=\"r2-highlight-3\" style=\"background-color: rgba(240, 186, 50, 0.3) !important;\"\/>\"\n                    "});
});

That's a complicated problem and I don't really have a solution at the moment. We could wait more but that's a band-aid and can also give a poor user experience.