In 2 pages mode, the second page may not show up entirely

[danielweck]

Originally posted by
@edas
at
readium/readium-js#49

See screenshot (in the right page : lack of a few characters on end of line, and lack of the blue right border of the "note"). Both reproduceable in Firefox and Chrome, both in master and in develop branches. This example is with the file "accessible epub 3" from readium-js-viewer.

When resizing little step per little step, it is easy to find a step where the second column is truncated of a few pixels.

In my example, here a few metrics :

• #reflowable-content-frame (<div> surrounding the <iframe>) is of 766.5 pixels
• iframe is of 767 pixels
• inner html document is 767 pixels with 353px columns and 60px gap

The total (2 columns + gap) should fit in the iframe, but does not.

<p>in the columns have 353.5px (and not 353px) however there are more than 1 pixel missing at right so I doubt this rounding error is the root problem.

However, the <aside> surrounded by a blue border has 335.5px widht + 2_8px padding + 2_1px border. This may have to be investigated as a potential cause of the problem.

[danielweck]

I am able to reproduce this (Chrome OSX, Readium "cloud reader" and Chrome extension).

In my test case, each column is one pixel wider than it should be. This imprecision accumulates to several pixels by the time Readium "scrolls" to the correct column (HTML left relative positioning).

This is a browser issue, I am not sure how we can solve it. A possible workaround would be to assume a larger column width by default ("rounding up"), but this would have an adverse effect when scrolling to columns that have the correct size!

I also noticed that the "pre" code fragments are truncated as they overflow pass the column boundary. Again, I don't think we can do much to fix this, unless we stop using CSS columns to emulate pagination (which would be good, as there are other problems with columnization, such as unplayable videos in WebViews! Unfortunately, the "proper" W3C pagination feature isn't widely supported, and it has its own caveats anyway).
I'm keeping this issue open, but with low priority.

[danielweck]

Ah, this seems to have fixed it (rounding error mitigation):
da248db

As described in the comment above, the "pre" code fragments still overflow pass the column boundaries, but that is a no-fix.

[jccr]

I still notice this issue in the latest develop:

It appears the left side gets cut off now:

This only happens if the viewport has an odd numbered width:

For example in my screenshot I'm using 1281x800
If I use 1280x800 or 1282x800 the issue doesn't appear..

[jccr]

One solution would be to always force the width we set to be even numbered.

[jccr]

This bug appears in pretty much any browser. I've seen it in iOS, OSX, Firefox, Chrome, Safari.

[danielweck]

Duplicate of #181 ?
If so, does #200 fix this as well?