futurepress / epub.js

Enhanced eBooks in the browser.
http://futurepress.org
Other
6.46k stars 1.11k forks source link

Continuous scrolled lazyload content flashes #936

Open wnabil opened 5 years ago

wnabil commented 5 years ago

Hi, I noticed a bug recently while using epubjs 3 with continuous scroll implementation "appears in the example as well". The content flashes randomly when trying to scroll to the top or the bottom of the book and on old PCs and phones the page turns white until you move the scroll bar a little bit and sometimes it keeps flashing too much and never fixed until reinitialize the book with the reader. I believe this issue is caused by the LazyLoading feature because when the content comes back i saw the book loads the next chunk and the scroll bar becomes longer.

I can give the application link on the store if needed so you can install it on your device and see the issue Also I have recorded a video to make the issue understandable well. here is the link for the video

The issue will appear in the video at second 00:00:43 and also here is a picture 1

I'm using epubjs v0.3.83 but i can see this issue in all the previous versions too. Possible solution:

Thank you for this awesome project.

fchasen commented 5 years ago

You can adjust the offset in pixels that it tries to preload a new view.

Zero should cause it to not preload at all, though I think it probably needs to be something like 10 to be usable. The default is 500.

var book = ePub("https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf");
var rendition = book.renderTo("viewer", {
      offset: 0
});

You might want to consider switch to forcing scrolled-doc for the virtual scroll on older devices, like in the example here: https://github.com/futurepress/epub.js/blob/master/examples/scrolled.html#L22-L25

This will only ever show one chapter at a time, and you'd need to have a button to go to the next one or listen for scroll events in your app and trigger rendition.next yourself.

wnabil commented 5 years ago

Thank you for the help, Sadly changing the offset did not really help, the content still turns white while scrolling too fast.

scrolled-doc is a good idea but is there a way to not remove the old chapter when rendering the next or the previous one ? Or if there is an option to display more than one chapter at the same time ?

42x42x42 commented 5 years ago

Reupload your video, because now its deleted from file server

digitalethics commented 4 years ago

@fchasen Would you consider integrating the Bountysource plugin so that bounties could be placed on issues like these? @damiencal I saw your request in the Foliate issue.