Reflowable document viewport gets clipped when enlarged (CSS columns)

[danielweck]

Originally posted here:
http://idpf.org/forum/topic-2430

By http://idpf.org/users/elania
Elania (Alex)

"
When I have a book open and the new window is fullscreen, a little bit of the left-hand side text is cut off. It's still technically readable, but it makes it much more difficult and is very annoying.

It doesn't do this if I make the screen small enough, but if I have to have it in a separate window, I want to at least have it as large as possible.
"

[rkwright]

This is also reproducible with the current release (0.18 in master) on OSX with SmokeTestFXL.epub

[danielweck]

@rkwright on a fixed-layout (pre-paginated) spine item, or a reflowable document?

[rkwright]

I have been able to reproduce only in fixed layout. Reflowable (in my limited testing) seems fine.

[theWhiteFox]

I have the same issue, my workaround is to change layout to document. Unfortunately doing this only displays a single page, however it least the page is not cropped.

[johanpoirier]

Some people in my company have the same issue but I haven't be able to observe it on my own laptop (MacBook Air).

[johanpoirier]

I located the bug.

The column width is computed with a Math.round():

• https://github.com/readium/readium-shared-js/blob/develop/js/views/reflowable_view.js#L623
• https://github.com/readium/readium-shared-js/blob/develop/js/views/reflowable_view.js#L645

And when we compute the page offset, we use the rounded value of the column width:
https://github.com/readium/readium-shared-js/blob/develop/js/views/reflowable_view.js#L456

I think of 2 solutions:

• do not round the columnWidth value and round the pageOffset value instead
• store in paginationInfo the exact value: paginationInfo.exactColumnWidth

Any thoughts?

[danielweck]

To those of you following this discussion thread, @johanpoirier kindly looked into this rounding issue, and has run some tests: #188 (comment)

[danielweck]

More screenshots from @thiagoeec here: readium/readium-js-viewer#344