EPUB with overflow-x: hidden style breaks pagination
#119
Comments
|
I tested
...but, Thorium injects additional stylesheets immediately after the ReadiumCSS "after" layer (which itself comes after publishers styles, which itself comes after ReadiumCSS "before" layer). For what it's worth, here is the current stack of CSS overrides in Thorium: /*
https://github.com/readium/readium-css/issues/117
no new stacking context, otherwise massive performance degradation with CSS Columns in large HTML documents
(web inspector profiler shows long paint times, some layout recalc triggers too)
*/
:root {
-webkit-perspective: none !important;
perspective: none !important;
}
:root[style].r2-css-paginated:not(.r2-fixed-layout),
:root.r2-css-paginated:not(.r2-fixed-layout) {
overflow: visible !important;
}
:root[style].r2-css-paginated:not(.r2-fixed-layout) > body,
:root.r2-css-paginated:not(.r2-fixed-layout) > body {
overflow-x: hidden !important;
overflow-y: visible !important;
}
:root[style].r2-fixed-layout,
:root.r2-fixed-layout {
overflow: hidden !important;
}
:root[style].r2-fixed-layout > body,
:root.r2-fixed-layout > body {
overflow: hidden !important;
margin: 0 !important;
}
:root.r2-css-paginated > body,
:root:not(.r2-css-paginated) > body,
:root.r2-fixed-layout > body,
:root:not(.r2-fixed-layout) > body,
:root[style].r2-css-paginated > body,
:root[style]:not(.r2-css-paginated) > body,
:root[style].r2-fixed-layout > body,
:root[style]:not(.r2-fixed-layout) > body {
position: relative !important;
}
:root[style]:not(.r2-css-paginated):not(.r2-fixed-layout),
:root:not(.r2-css-paginated):not(.r2-fixed-layout) {
height: 100vh !important;
}
:root[style]:not(.r2-fixed-layout) > body,
:root:not(.r2-fixed-layout) > body {
min-height: inherit;
}
:root[style]:not(.r2-css-paginated):not(.r2-fixed-layout) > body,
:root:not(.r2-css-paginated):not(.r2-fixed-layout) > body {
height: inherit;
} |
|
Ah, I disabled the CSS hacks (see stylesheet snippet above), and the Arabic RTL still text flows correctly in Thorium. I guess the Chromium web browser engine is happier in Thorium than in Android? :) |
|
Thanks for the feedback @danielweck. I tested on iOS and it worked fine as well, so it might be an Android-specific issue. Interestingly the edge taps work on Android, it's only the swipes that fail. Might be an issue in the gesture recognition. |
|
What the hell?! Thorium is broken with latest Electron build (updated Chromium). Same pagination problem with overflow X |
|
😅 This is what I injected to fix the issue, inspired by your snippets: :root[style], :root { overflow: visible !important; }
:root[style] > body, :root > body { overflow: visible !important; } |
|
Unfortunately I cannot use that trick in Thorium :( (see the extraneous scroll bars!)
|
|
|
|
UPDATE: the culprit is |
|
@danielweck I think the epub in the kotlin-toolkit issue has the issue directly in the I looked through a few Chromium issues, but nothing stood out as to why this started happening. |
|
Let's reopen this issue until we have a fix suitable for all platforms. |
|
Ouch, there is a "regression" bug (sort of) in cover images that used to span across into the next CSS column: edrlab/thorium-reader#1861 (comment) Damn. |
Originally posted by @stevenzeck in readium/kotlin-toolkit#292 (comment)
Original Bug Report by A-Fawzyy
What happened?
The attached epub's chapter shows in a single page, where it should show over several pages.
book-vertical-render-issue_compressed.mp4
Expected behavior
Only a part of the chapter should show, and the rest of the chapter should be displayed after navigating to the next page.
Actual behavior
The chapter is rendered in a single page.
How to reproduce?
الحرب_والسلم_(الكتاب_الأول).epub.zip
The ebup download url: https://downloads.hindawi.org/books/26307461.epub
Environment
Development environment
Testing device
Additional context
The text was updated successfully, but these errors were encountered: