search

readium / readium-js-viewer

👁 ReadiumJS viewer: default web app for Readium.js library
BSD 3-Clause "New" or "Revised" License
550 stars 186 forks source link

Epub fixed layout doesn't load : Samsung internet / Chrome iphone / IE 11 desktop #702

Closed jerlp closed 6 years ago

jerlp commented 6 years ago

This issue is a Bug

Expected Behaviour

Epub fixed layout loads correctly

Observed behaviour

Instead, Readium does not load the epub (only show the load icon)

Steps to reproduce

  1. From your android, on the Samsung Internet browser (tested on galaxy s6, version 6.4.10.5), open this adress http://readium-eetlhia-hut3hvciykp7s.eu.platform.sh/readium?epub=%2Fsites%2Fdefault%2Ffiles%2Fepub_content%2F195%2F9782864973195&goto=epubcfi(/6/2!/4/2/2)&ean=9782864973195

Same problem on

  1. You arrive on the page and see the load icon, but then nothing happen, it just loads

Product

Thanks

screenshot_20180601-104044

danielweck commented 6 years ago

This issue sounds similar to:

https://github.com/readium/readium-js/pull/73 ( https://github.com/readium/readium-js/issues/72 )

To be investigated...

johanpoirier commented 6 years ago

Hi,

I just tested the URL you gave in the issue on IE11 (Windows 7) and it loads the book.

Is the issue still relevant on IE11? Did you fix it?

danielweck commented 6 years ago

This should be fixed by PR https://github.com/readium/readium-js/pull/193 (I am running some tests)

danielweck commented 6 years ago

FYI: no HTTP CORS headers on this sample EPUB, so I will not be able to test remotely from our own deployment. However, the problem should exists with any publication (exploded and packed/zipped), so the bug can be tested with the Readium-deployed test EPUBs.

curl -i http://readium-eetlhia-hut3hvciykp7s.eu.platform.sh/sites/default/files/epub_content/195/9782864973195/META-INF/container.xml

HTTP/1.1 200 OK
Cache-Control: max-age=300
Content-Type: text/xml
Date: Thu, 21 Jun 2018 15:31:25 GMT
Etag: W/"59e70c74-fb"
Expires: Thu, 21 Jun 2018 15:36:25 GMT
Last-Modified: Wed, 18 Oct 2017 08:10:28 GMT
Strict-Transport-Security: max-age=0
Vary: Accept-Encoding
X-Correlation-Id: 7ramglt4jp523oqqj53advdk
X-Debug-Info: eyJyZXRyaWVzIjowfQ==
X-Platform-Cache: MISS
X-Platform-Cluster: hut3hvciykp7s-readium-eetlhia
X-Platform-Processor: hut3hvciykp7s-readium-eetlhia--app
X-Platform-Router: hut3hvciykp7s-readium-eetlhia--router
X-Robots-Tag: noindex, nofollow
Content-Length: 251

<?xml version="1.0" encoding="utf-8"?>
<container xmlns="urn:oasis:names:tc:opendocument:xmlns:container" version="1.0">
  <rootfiles>
    <rootfile full-path="EPUB/package.opf" media-type="application/oebps-package+xml"/>
  </rootfiles>
</container>
danielweck commented 6 years ago

I will close this issue once the official web/cloud reader deployment is operational.

danielweck commented 6 years ago

TravisCI .... https://travis-ci.org/readium/readium-js-viewer/builds/395087375

danielweck commented 6 years ago

Please try this link in the web browser / platform where the bug normally occurred, and let us know if it works: https://readium.firebaseapp.com/?epub=epub_content%2Fpage-blanche (this is an exploded / unpacked EPUB)

danielweck commented 6 years ago

Please try this other link too (this is a zipped / packed EPUB): https://readium.firebaseapp.com/?epub=epub_content%2Finternal_link.epub

danielweck commented 6 years ago

I'm seeing the infinite circular loader graphics on my iPad when I open any EPUBs with the Readium web/cloud reader on Chrome (works fine in Safari). I need to debug the Chromium webview (inspect via USB from my computer) to figure out what is going on. I suspect it is related to the same Blob builder thing ... but we have to verify this assumption.

danielweck commented 6 years ago

Well, Firebug-Lite seems dead, so I will not use this to inspect Chrome on iOS :( https://getfirebug.com/releases/lite/chrome/

UPDATE: this works:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/firebug-lite/1.4.0/firebug-lite.js#startOpened=true"> </script>
danielweck commented 6 years ago

The other option is Weinre ( https://people.apache.org/~pmuellr/weinre/docs/latest/ ) and Ngrok ( https://ngrok.com ) but unfortunately I don't have the bandwidth right now to troubleshoot this. Any takers?

Chrome on iOS might well be an insignificant edge-case too, affecting only a small number of users (I don't know ... don't people use Mobile Safari on iOS?). The irony is that Apple only allows WebKit webviews, not Chromium!

johanpoirier commented 6 years ago

@danielweck I'm working from home today and I have no iOS device. I could give it a shot on monday.

danielweck commented 6 years ago

@jerlp : any news? In a previous comment (above in this thread), I was wondering whether you are now able to load the Readium cloud/web reader URL? https://readium.firebaseapp.com/?epub=epub_content%2Fpage-blanche (on the platforms that used to be problematic before the fix)

Alternatively, please update your copy of Readium based on the latest code / head of the develop branch (readium-js-viewer as well as submodules), and test your app deployment again: http://readium-eetlhia-hut3hvciykp7s.eu.platform.sh/readium?epub=%2Fsites%2Fdefault%2Ffiles%2Fepub_content%2F195%2F9782864973195

Many thanks :)

jerlp commented 6 years ago

Hello,

I've tested this link : https://readium.firebaseapp.com/?epub=epub_content%2Fpage-blanche And it does not work on IE 11 and chrome iPhone (images chrome-iphone ie11 ie11

attached)

+

Images are small on iphone : safari and firefox Same on Samsung galaxy s6 : chrome and native browser

iphone-firefox iphone-safari

Thanks

danielweck commented 6 years ago

Yes, Chrome on iOS (tested on iPad and iPhone) fails to load the publication content. Yet, under the hood Chrome is supposed to be based on the same WebKit browser engine as Mobile Safari (maybe WKWebView vs. UIWebView -related bug?) Unfortunately (as I reported above) it is not trivial to inspect Chrome's webview component because ; unlike Mobile Safari ; the debugger protocol is not open.

danielweck commented 6 years ago

With regards to fixed-layout "images" looking small: right now this is actually a feature of the web / cloud reader + Readium FXL layout engine, not a bug. Readium's implementation conforms to the EPUB3 specification and respects the authored metadata to render FXL page spreads (contiguous pages side-by-side). Which means that as "Page Blanche" is explicitly crafted to display certain pages next to each other, in portrait mode the images appear too small. This visual effect is emphasized in this particular case, because of the white margin borders which are "baked" into the images themselves, and because of the vertical blank space created by the left/right navigation arrows (previous/next commands) which do no overlap publication documents.

So, in my view ; as a developer and a user ; it has always been clear that Readium web / cloud reader had never been designed for mobile platforms (lack of proper support for touch gestures, no adapted layout for limited screen real estate, etc.). In fact, the user interface was primarily designed for the Chrome app (a desktop app), and this UI is also used by the cloud / web reader variant (same codebase).

During a recent Readium engineering conference call, we talked about deviating from the EPUB3 specification (FXL metadata) in order to offer a better user experience (e.g. avoid small fixed layout pages in portrait mode), and we looked at how iBooks implements support for 2-page spreads (double tap to enter the 2-page spread, touch-drag to pan across the pages).

danielweck commented 6 years ago

With respect to IE11: actually, the FXL pages load okay, but there seems to be a separate problem related to ES6 collections (Map, Set, for which there are polyfill / patchers for incomplete native implementations). I am looking into this, and I will file a separate GitHub issue.

https://github.com/WebReflection/es6-collections vs.:

https://github.com/Steditor/es6-collections-iterators https://github.com/paulmillr/es6-shim etc.

danielweck commented 6 years ago

I am proposing a fix for IE11 (unrelated to the iframe "loader" which has been fixed in the develop branch). See: https://github.com/readium/readium-shared-js/pull/450

Note that the iOS/Chrome bug remains, so we can keep this issue open until we figure out what is going on (we need access to Chrome's web console)

danielweck commented 6 years ago

The Chrome-iOS bug is fixed in the develop branch, see https://github.com/readium/readium-js/commit/a5684d8a5c1e8a32721efd2fc458d6ffa9b7edd3

TravisCI is building: https://travis-ci.org/readium/readium-js-viewer/builds/400083559 When the app is deployed, please try again: https://readium.firebaseapp.com/?epub=epub_content%2Fpage-blanche

Reminder: the fix for IE11 is totally separate, see https://github.com/readium/readium-shared-js/pull/450

danielweck commented 6 years ago

Confirmed working in Chrome-iOS.

We will close this issue once PR 450 is merged (IE11). @JCCR could you please have a look, as if I remember correctly you introduced the es6-collections polyfill for the CFI lib (amongst other uses). Thanks! https://github.com/readium/readium-shared-js/pull/450

danielweck commented 6 years ago

For future reference, I should point that I used the following HTML snippet in the index.html of the cloud/web reader app, in order to debug Chrome on iOS via Firebug-lite (which although old and deprecated, seems to continue to work sufficiently well):

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/firebug-lite/1.4.0/firebug-lite.js#startOpened=true"> </script>
danielweck commented 6 years ago

PR merged: https://github.com/readium/readium-shared-js/pull/450 Closing this issue now. Thanks!

danielweck commented 6 years ago

Note that TravisCI is still building, so please wait a little before testing IE11 :) https://travis-ci.org/readium/readium-js-viewer/builds/400526110

danielweck commented 6 years ago

Okay, cloud/web reader app deployed with the latest code from the develop branch: https://readium.firebaseapp.com/?epub=epub_content%2Fpage-blanche

Alternatively: https://readium.surge.sh/?epub=https%3A%2F%2Freadium.firebaseapp.com%2Fepub_content%2Fpage-blanche

danielweck commented 5 years ago

Quick update: note that ; just to double-check on the latest web browsers available to date ; I have successfully tested the bug fixes ( https://github.com/readium/readium-shared-js/pull/450 and https://github.com/readium/readium-js/commit/a5684d8a5c1e8a32721efd2fc458d6ffa9b7edd3 ) on Windows 10 with Edge, IE11, Chrome and Firefox, as well as on iOS with Chrome (iPad 4, as I do not have access to an iPhone).