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

Cloud Reader Scrolling issues in Safari #680

Open mvariaaty opened 6 years ago

mvariaaty commented 6 years ago

General Instructions

Scrolling in "Continuous" mode in Safari (Mac) does not work well in cloud reader (https://readium.firebaseapp.com). Note that it does work fine on Chrome (Version 62.0.3202.94 ) and Firefox (57.0.1).

This issue is a Bug

Expected Behaviour

Reading in "Continuous" scroll mode should work correctly in Safari

Observed behaviour

Scrolling in continuous mode seems buggy. To better explain the issues, I have created a video that exhibits the behavior - https://drive.google.com/file/d/1bFvUXWgMqYbEjpu7DmVO1tj6F6s2Hjh-/view?usp=sharing 1) Scrolling via touchpad sometimes lead to blank screen, which can then be scrolled up again. See video at 0:22 sec 2) Scrolling down displays the spinner, loads the content and takes the user back to the start of the page. This essentially does not allow to read next page. In the video, notice the browser scrolling back to start of Chapter 9 - 0:42 sec onwards 3) It seems that user needs to scroll up a little bit, before scrolling down is allowed

Steps to reproduce

  1. Open safari on a mac. Issue is observed in Version 11.0 (11604.1.38.1.7) of Safari on Mac
  2. Visit https://readium.firebaseapp.com
  3. Open the epub - "Moby dick (Styled)"
  4. Open Settings menu and select "Layout" tab
  5. Select "Scroll mode" as "Continuous"
  6. Save the settings
  7. Scroll the pages to read the content in the reader. Notice the scrolling issues.

Test file(s)

Video that exhibits the behavior - https://drive.google.com/file/d/1bFvUXWgMqYbEjpu7DmVO1tj6F6s2Hjh-/view?usp=sharing

Product

Choose one of the following (and delete the others)

Additional information

Scrolling in continuous mode works fine in other browsers that I have tested.

mvariaaty commented 6 years ago

For Safari, I noticed that domRange.getBoundingClientRect() in getDomRangeAsRange function (https://github.com/readium/readium-shared-js/blob/master/js/views/scroll_view.js) gives incorrect results when range is collapsed. I see a note of the same effect in https://github.com/readium/readium-shared-js/blob/master/js/views/cfi_navigation_logic.js, which states that "Webkit has a bug where collapsed ranges provide an empty rect with getBoundingClientRect()". Applying the same logic in getDomRangeAsRange, ie. using getClientRects instead of getBoundingClientRect, when range is collapsed, fixes point 2, in my testing.

There are few more usages of getBoundingClientRect in the code. I wonder if they all would need similar treatment, if the above is correct ?

danielweck commented 6 years ago

@JCCR do you have any thoughts on this? (asking because of "client rectangles" -related problems, CfiNavigationLogic etc.)