Various reflowable EPUB columns shift issues

[mickael-menu]

On some books, when swiping through the content, the EPUB columns are shifting and are not aligned anymore. This reverts by tapping on the edges.

I could reproduce this on oryel_1984.zip from this issue: #167

[mickael-menu]

Another related issue, the columns are slightly shifting in long resources, such that the last page is not centered. For example with Gatsby:

[mickael-menu]

Another issue, I can move the offset of a page by pinching it, then panning it in a single gesture.

[johanpoirier]

I also have issues with going to a locator with an anchor fragment (i.e. Chapitre02.html#int02-s3).
The columns are shifted as well. Loading the webView with an URL containing an anchor is problematic. Is it CSS related?

[nidhinprathap]

@johanpoirier there's a method that's javascript getting called but the definition is missing. Please check the below-mentioned ticket.
readium/r2-testapp-kotlin#351

For now, you can change tat and call scrollToTag method in utility.js

[johanpoirier]

For now, you can change tat and call scrollToTag method in utility.js

Yes I did see that and I used scrollToId method instead. But the behaviour is sometimes odd. When the URL has an anchor, the page displayed is the one before so I'm trying to debug the issue right now.

[nidhinprathap]

ah for that can u try this

var scrollAnchor = function(id) {
        var element = document.getElementById(id);
        var elementOffset = element.scrollLeft // element.getBoundingClientRect().left works for Gutenbergs books
        if (elementOffset == 0) {
            elementOffset = element.getBoundingClientRect().left;
        }
        var offset = Math.round(window.scrollX + elementOffset);

        document.scrollingElement.scrollLeft = snapOffset(offset);
 
};

@johanpoirier can you try this. Add this method to utils.js. And call scrollAnchor from Kotlin like this

val id = url.substring(url.indexOf('#')+1); // this is to ignore hash from start
webView.loadUrl("javascript: scrollAnchor('$id');")

[johanpoirier]

Another issue, I can move the offset of a page by pinching it, then panning it in a single gesture.

This is caused by those lines of code: https://github.com/readium/r2-navigator-kotlin/blob/develop/r2-navigator/src/main/java/org/readium/r2/navigator/R2WebView.kt#L735-L738

The mLastMotionX is set by the second finger down, so the xDiff is almost never greater than mTouchSlop: https://github.com/readium/r2-navigator-kotlin/blob/develop/r2-navigator/src/main/java/org/readium/r2/navigator/R2WebView.kt#L677

My question is: why are we mixing touch pointers values into mLastMotionX?

[mickael-menu]

It looks like the offset issues are caused by some rendering bug in Android's Web View, but we have a potential workaround enabled by Readium CSS: readium/css#97

[mickael-menu]

I pushed a PR which addresses the offset issue at least in my use cases, using the latest version of Readium CSS. I'm not 100% sure it fixes all of the reported offset issues.

readium/r2-navigator-kotlin#178

Note that utils.js is completely rewritten, to align with the Swift version. I didn't see any regression with RTL (which didn't work anyway in my tests) but something to keep in mind in case some other issues pop up.

@johanpoirier

I also have issues with going to a locator with an anchor fragment (i.e. Chapitre02.html#int02-s3).
The columns are shifted as well.

This should be fixed as well, would you mind double-checking with this PR?