Skip to content

Commit 7c572dd

Browse files
mickael-menumickael-menu
authored
Fix performance with EPUB FXL spreads (#236)
1 parent a86e65d commit 7c572dd

File tree

6 files changed

+38
-13
lines changed

6 files changed

+38
-13
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ All notable changes to this project will be documented in this file. Take a look
2929

3030
* Fixed memory leaks in the EPUB and PDF navigators.
3131
* [#61](https://github.com/readium/swift-toolkit/issues/61) Fixed serving EPUB resources when the HREF contains an anchor or query parameters.
32+
* Performance issue with EPUB fixed-layout when spreads are enabled.
33+
* Disable scrolling in EPUB fixed-layout resources, in case the viewport is incorrectly set.
3234

3335
#### Streamer
3436

‎Sources/Navigator/EPUB/Assets/Static/scripts/readium-fixed-wrapper-one.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ __webpack_require__.r(__webpack_exports__);
1212
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
1313
/* harmony export */ "FixedPage": () => (/* binding */ FixedPage)
1414
/* harmony export */ });
15+
//
16+
// Copyright 2022 Readium Foundation. All rights reserved.
17+
// Use of this source code is governed by the BSD-style license
18+
// available in the top-level LICENSE file of the project.
19+
//
1520
// Manages a fixed layout resource embedded in an iframe.
1621
function FixedPage(iframeId) {
1722
// Fixed dimensions for the page, extracted from the viewport meta tag.
@@ -95,18 +100,20 @@ function FixedPage(iframeId) {
95100
page.isLoading = true;
96101

97102
function loaded() {
98-
_iframe.removeEventListener("load", loaded); // Waiting for the next animation frame seems to do the trick to make sure the page is fully rendered.
103+
_iframe.removeEventListener("load", loaded); // Timeout to wait for the page to be laid out.
104+
// Note that using `requestAnimationFrame()` instead causes performance
105+
// issues in some FXL EPUBs with spreads.
99106

100107

101-
_iframe.contentWindow.requestAnimationFrame(function () {
108+
setTimeout(function () {
102109
page.isLoading = false;
103110

104111
_iframe.contentWindow.eval("readium.link = ".concat(JSON.stringify(resource.link), ";"));
105112

106113
if (completion) {
107114
completion();
108115
}
109-
});
116+
}, 100);
110117
}
111118

112119
_iframe.addEventListener("load", loaded);

‎Sources/Navigator/EPUB/Assets/Static/scripts/readium-fixed-wrapper-two.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ __webpack_require__.r(__webpack_exports__);
1212
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
1313
/* harmony export */ "FixedPage": () => (/* binding */ FixedPage)
1414
/* harmony export */ });
15+
//
16+
// Copyright 2022 Readium Foundation. All rights reserved.
17+
// Use of this source code is governed by the BSD-style license
18+
// available in the top-level LICENSE file of the project.
19+
//
1520
// Manages a fixed layout resource embedded in an iframe.
1621
function FixedPage(iframeId) {
1722
// Fixed dimensions for the page, extracted from the viewport meta tag.
@@ -95,18 +100,20 @@ function FixedPage(iframeId) {
95100
page.isLoading = true;
96101

97102
function loaded() {
98-
_iframe.removeEventListener("load", loaded); // Waiting for the next animation frame seems to do the trick to make sure the page is fully rendered.
103+
_iframe.removeEventListener("load", loaded); // Timeout to wait for the page to be laid out.
104+
// Note that using `requestAnimationFrame()` instead causes performance
105+
// issues in some FXL EPUBs with spreads.
99106

100107

101-
_iframe.contentWindow.requestAnimationFrame(function () {
108+
setTimeout(function () {
102109
page.isLoading = false;
103110

104111
_iframe.contentWindow.eval("readium.link = ".concat(JSON.stringify(resource.link), ";"));
105112

106113
if (completion) {
107114
completion();
108115
}
109-
});
116+
}, 100);
110117
}
111118

112119
_iframe.addEventListener("load", loaded);

‎Sources/Navigator/EPUB/Assets/fxl-spread-one.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
</head>
2828

2929
<body>
30-
<iframe id="page"></iframe>
30+
<!-- Prevents scrolling if the viewport doesn't match the body width in the resource. -->
31+
<iframe id="page" scrolling="no"></iframe>
3132
<script type="text/javascript" src="/r2-navigator/epub/scripts/readium-fixed-wrapper-one.js"></script>
3233
</body>
3334
</html>

‎Sources/Navigator/EPUB/Assets/fxl-spread-two.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,13 @@
6262

6363
<body>
6464
<div id="viewport-left" class="viewport">
65-
<iframe id="page-left" class="page"></iframe>
65+
<iframe id="page-left" class="page" scrolling="no"></iframe>
6666
</div>
6767
<div id="viewport-right" class="viewport">
68-
<iframe id="page-right" class="page"></iframe>
68+
<iframe id="page-right" class="page" scrolling="no"></iframe>
6969
</div>
7070
<div id="viewport-center" class="viewport">
71-
<iframe id="page-center" class="page"></iframe>
71+
<iframe id="page-center" class="page" scrolling="no"></iframe>
7272
</div>
7373

7474
<script type="text/javascript" src="/r2-navigator/epub/scripts/readium-fixed-wrapper-two.js"></script>

‎Sources/Navigator/EPUB/Scripts/src/fixed-page.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
//
2+
// Copyright 2022 Readium Foundation. All rights reserved.
3+
// Use of this source code is governed by the BSD-style license
4+
// available in the top-level LICENSE file of the project.
5+
//
6+
17
// Manages a fixed layout resource embedded in an iframe.
28
export function FixedPage(iframeId) {
39
// Fixed dimensions for the page, extracted from the viewport meta tag.
@@ -82,16 +88,18 @@ export function FixedPage(iframeId) {
8288
function loaded() {
8389
_iframe.removeEventListener("load", loaded);
8490

85-
// Waiting for the next animation frame seems to do the trick to make sure the page is fully rendered.
86-
_iframe.contentWindow.requestAnimationFrame(function () {
91+
// Timeout to wait for the page to be laid out.
92+
// Note that using `requestAnimationFrame()` instead causes performance
93+
// issues in some FXL EPUBs with spreads.
94+
setTimeout(function () {
8795
page.isLoading = false;
8896
_iframe.contentWindow.eval(
8997
`readium.link = ${JSON.stringify(resource.link)};`
9098
);
9199
if (completion) {
92100
completion();
93101
}
94-
});
102+
}, 100);
95103
}
96104

97105
_iframe.addEventListener("load", loaded);

0 commit comments

Comments
 (0)