Absolutely positioned elements are misplaced

[rkwright]

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

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]

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]

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]

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

[rkwright]

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

Are you seeing something different?

[danielweck]

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.