search

readium / readium-shared-js

Repository for the shared JavaScript libraries that are used in the SDK-Launchers and other applications developed on top of the SDK
BSD 3-Clause "New" or "Revised" License
78 stars 102 forks source link

Absolutely positioned elements are misplaced #423

Open rkwright opened 6 years ago

rkwright commented 6 years ago

This issue is a Bug

Related issue(s) and/or pull request(s)

None known

Expected Behaviour

Red rectangle should be in the lower left corner of visible window

Observed behaviour

Instead, the rectangle is located off the page. See screenshot

bad_loc

Steps to reproduce

  1. Open test file in Chrome app (or OSX Loader)
  2. Go to page 4
  3. Observe that rectangle is in wrong place

Test file(s)

https://drive.google.com/open?id=10y7ZJKdoG2yDVfqXLRkCWrDcbRDhW_eq

Product

Readium Chrome extension 0.29.alpha Cloud Reader 0.29-alpha OSX Launcher 0.29 others not yet tested

Works correctly in iBooks on OSX 10.11

Additional information

Please list any additional information that might help us

rkwright commented 6 years ago

Additional data-point: In reflowable document, the same construct i.e. 

<div id="dat.gui" style ="border-style:solid;border-color:red;position: absolute;bottom:0;left:0;height:50px;width:100px;z-index: 10;">Wowser</div>

Is placed at the bottom of the reflowable-content box.

danielweck commented 6 years ago

position: absolute relative to which DOM ancestor? When I load xhtml/chapter04.xhtml in a vanilla web browser, the red box appears in the lower-left corner, as low as possible within the visible viewport (overlaid on top of the main document's text). When I resize the window, the red box "sticks" to this corner. PS: if I scroll the window contents, then the red box disappears out of view, which means that the absolute positioning is not relative to what you want, I think.

danielweck commented 6 years ago

I've just tested in iBooks and the HTML renders in the same way as the Chrome app.

rkwright commented 6 years ago

Hm. This is what I see in iBooks (v. 1.10 (1289)) on OSX:

ibooks_abs Are you seeing something different?

danielweck commented 6 years ago

Okay, once I set body@style="margin:0" in chapter4.xhtml, I get a pixel-perfect rendition in iBooks (webkit), Readium Chrome app (Chromium) and Readium web / cloud reader in Safari (webkit) and Chrome (Chromium). Without the margin reset on the body element, browsers automatically apply an 8px margin around the body, which screws-up aspect ratio calculations for scaling the iframe (using CSS transforms) to the dimensions of the visible viewport (in other words, the body has a smaller size than the html document itself, and as a result some content gets clipped at the bottom of the page).

So, I believe Readium's fixed-layout code should be fixed by forcing the body margin to zero. This will match iBooks behaviour.