foliate-js icon indicating copy to clipboard operation
foliate-js copied to clipboard

Pinch zoom breaks the touch paging on firefox for android

Open MarkReedZ opened this issue 10 months ago • 3 comments

On my android tablet the online demo doesn't page on swipe. It scrolls 1 page left or right then stops.

My reader does page on touch events though I don't know why its different than the online demo. However pinch zoom breaks the pagination in the same way. Oddly the pagination remains broken until firefox is closed and reopened.

The following workaround disabling pinch zoom fixes the problem.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

MarkReedZ avatar Jun 13 '25 05:06 MarkReedZ

Are you talking about the reflowable or fixed layout books? And what do you mean exactly by "It scrolls 1 page left or right then stops"? If you mean that a single swipe can only make the page turn once, that is the expected behavior.

The paginator for reflowable books does handle pinch zooms. It used to disable it, but that was changed in 4732a23e17cba3bd5687ecf820b946777e218c32. As you can see in that commit, there's a strange issue where Firefox sometimes reports incorrect visualViewport, but there's a workaround in place. It was quite a while ago since I tested it, though.

johnfactotum avatar Jun 16 '25 17:06 johnfactotum

I will update when I have some other tablets to test and have reviewed your workaround and debugged.

Yeah its a reflowable book. I believe the way you render the page flipping is to render an offscreen left and right page so a swipe starts a horizontal scroll then you force the next or previous page.

The online demo on my android tablet with firefox doesn't page flip. It just horizontally scrolls showing the left, current, and right pages. The buttons are the only way to page through the epub. This happens every time for me.

My reader doesn't have the issue until you pinch zoom.

MarkReedZ avatar Jul 06 '25 02:07 MarkReedZ

The online demo on my android tablet with firefox doesn't page flip. It just horizontally scrolls showing the left, current, and right pages. The buttons are the only way to page through the epub. This happens every time for me.

My reader doesn't have the issue until you pinch zoom.

This is intended as in the paginator. It will only paginates with a touch end when the scale is 1:

#onTouchEnd() {
        if (!this.#touchScrolled) return
        this.#touchScrolled = false
        if (this.scrolled) return

        // XXX: Firefox seems to report scale as 1... sometimes...?
        // at this point I'm basically throwing `requestAnimationFrame` at
        // anything that doesn't work
        requestAnimationFrame(() => {
            if (globalThis.visualViewport.scale === 1)
                this.snap(this.#touchState.vx, this.#touchState.vy)
        })
    }

chrox avatar Jul 06 '25 02:07 chrox