[CSS] Viewport height unit issues in scroll mode

[JayPanoz]

This issue is a Bug

So this is a tough one related to media sizing, replaced elements and, optionally, calc(). Also, I’m sorry since I’m kind of this CSS hack’s creator.

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

None (to my knowledge).

Expected Behaviour

When the author uses vh for (min|max-)height, images should be sized depending on the viewport height, whichever reading mode is set by the user (paged/scroll).

Observed behavior

In scroll mode, vh is unreliable, and it is my understanding it is related to iframe, it’s original size (as a replaced element, 300 x 150) and contents injection.

Steps to reproduce

This is complex as there are two different bugs, please feel free if you need clarifications.

Bug 1: vh

Let’s say you have those styles for Image sizing:

img.cover {
  height: 95vh;
}

In scroll mode, it will be 95% of 150 pixels, not 95% of the Readium’s window.

Bug 2: calc with vh

Now let’s say you have

img.with-a-caption {
  height: calc(99vh - 3em);
}

The computed value will be updated regularly as contents are injected in the continuous iframe. A year ago, I ended up with images which computed height was like 20000px.

See tweet with video.

Test file(s)

I’ll try to provide @danielweck with a test file ASAP.

I can tell @artbyrt has at least another test file available since he reported this on the Readium CSS repo.

Product

Readium Chrome extension (and possibly others), at least since May 2016.

Additional information

Bug 1: You somehow can fix this bug by using media queries (max-height: 151px) and resetting height so that the image is sized depending on its width.

Bug 2: Authors can actually fix the calc() bug by setting a max-height for those images.

Quick and dirty fix

Override image sizing in scroll mode.

img {
  max-width: 100%;
  height: auto !important;
  max-height: {absolute value} !important;
}

You can pick the value so that it’s the height of the viewport for instance.

And then get rid of this declaration when the user sets paged view.

[JayPanoz]

So, with version 0.27, it’s the other way around (static vh grows as contents are injected in scroll while calc doesn’t).

I can confirm this bug is reproducible with this file: https://github.com/JayPanoz/ebookcraft2017/tree/master/ebookcraft_materials/Demos_epubfile

See files 000_svg.xhtml (vh) and 004_portrait.xhtml (calc())