Chrome/Opera/Chromium-only bug (not Safari WebKit): cover image "fit" overflows in next column

[danielweck]

EPUB:
https://readiumfoundation.box.com/s/eruhof2djmz3mmj1qg3a

[johanpoirier]

Any update on this issue ?

[johanpoirier]

I've just spend the 3 last hours on this issue :

The cover image doesn't scale up/down correctly because :

• the cover image has an height of 100%
• and its parents have no height

For my project, I came up with a quick fix in both readium-shared-js and readium-js :

• I fixed the height of the current iframe page body with the same value of min-height (see https://github.com/TEA-ebook/readium-shared-js/blob/tea/js/views/reflowable_view.js#L667). Why setting min-height and mx-height but not height ?
• I fixed the height of the parents of the cover image (see https://github.com/TEA-ebook/readium-js/blob/tea/epub-modules/epub-fetch/src/models/content_document_fetcher.js#L344)

I think this solution may break things but I had no time to test it thoroughly. I know we can do better but this is a start :-)

[danielweck]

@johanpoirier Thanks!
Regarding height vs. min/max-height: the rationale was probably to avoid interfering with the default dimensions of a "small" amount of HTML content (i.e. preserve whatever the computed height is, when under the MAX value). However, I have just tested Right-To-Left + Vertical-Writing-Mode EPUBs and setting the height explicitly does not seem to interfere with any of the CSS column computations, so I would be happy to use this fix given the benefit of properly-resized "cover" images, across all web browsers. EDIT: ah, there's a regression bug, see comment below #144 (comment)

[danielweck]

Regarding the changes in content_document_fetcher.js: this code is only used by the "cloud reader" configuration (not the "chrome extension" or native ReadiumSDK "launcher apps"), so I would be reluctant to implement it that way. Instead, a solution in readium-shared-js would be more appropriate, as it would benefit all platforms at once.

[danielweck]

Unfortunately, explicitly setting the height (either 100% or fixed pixel value) breaks single-page reflow pagination, because an additional CSS column incorrectly gets inserted after the correct page. I can reproduce this behaviour with Firefox, Chrome, Safari on OSX, with the "Accessible EPUB3" ebook that's in the readium-js-viewer repository (under the epub_content/ folder).

The reason is that the html element's computed CSS style reports a scrollWidth that is larger than the actual width of its body.

[johanpoirier]

Thanks for your feedback @danielweck. As I was saying in my first comment, this is not the perfect solution.

By the way, I will probably have more time to work on the readium cloud reader in the beginning of next year.

[danielweck]

Thanks a lot @johanpoirier your contributions and/or experimentations are much welcome! :)

[danielweck]

Related: #138 and #88