I have not tested your code (I can't do it right now) but I would bet that will generate a blank page after the cover. In fact, I almost sure that that blank page will be present on EpubJS (a Sigil's plugin), PocketBook and OverDrive (overflow: hidden seems not to work there). By the way, max-height is not supported by Legacy RMSDK. I also saw that you are using height: 100% for the "body" selector; that won't work UNLESS you apply the same property (height: 100%) to the "html" selector. Right now your code is ignoring that property in "body" and only is applying max-height: 100vh. And regarding using viewport units, have you considered what happens in landscape mode? Have you considered to employ, instead of vw. vh, vmin or vmax?
EDIT: I could test your code and I must say that in general is a great job. Practically works everywhere (and I tested the code with a lot of ereaders in Windows, Linux and Android). I only found issues with Bibi Reader (a Sigil's plugin) where the cover is not showed at all and with BookFusion and Infinity Reader, both in
landscape mode (in portrait mode it works flawlessly). But to me, the only issue to consider is with Bibi (in fact, the code I currently use, has an issue in landscape mode with BookFusion), not for Bibi but for the rendering engine used by Bibi (others ereaders can use the same engine). Probably the property "position: absolute" in conjuntion with "object-fit: contain" is causing the problem; do the following:
In your .css stylesheet for "body" write:
Code:
body#Setup {
height: 99vh;
margin: 0;
padding: 0;
}
and for #container img write:
Code:
#container img {
display: block;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border: 0;
}
Test what happens (when you use "position: absolute" with top. bottom, right and left equal to 0, automatically the image takes all the space available, so is not necessary object-fit: contain)