[Slevin#7]

Originally Posted by RbnJrg

Well, I don't know what can it go wrong with your PocketBook. In my PB for Android all works fine:

Thanks again, I've tried your new upload as well, but still the same issue - seems to be an Apple problem ;(

However, since the majority of our members work with Apple devices I'll have to take this as the least common denominator. GPB and Apple Books work fine - with some minor flaws in Apple Books regarding background colors when the dark theme is active.

@KevinH:
Many thanks for this valuable information about Apple Books and Google Play.

To bring my topic question to a conclusion I will say, that it seems to be safe to use 100vh, but with your suggestions I have added the svh unit as well without any troubles. Also, thanks to RbnJrg's CSS in his provided ebook, I found out that adding the overflow property to the container where the height property is set will force Thorium to render the page properly as expected. So here is the final HTML and CSS I'm currently using:

HTML:

<div class="single-page v-center">
  <figure>
    <img src="../images/aloha.png"/>
  </figure>
</div>

CSS:

.single-page {
  -webkit-column-break-before: always;
            page-break-before: always;
                 break-before: always;
   -webkit-column-break-after: always;
             page-break-after: always;
                  break-after: always;
}

.single-page.v-center {
  display: flex;
  justify-content: center;
  align-items: center;
  /** Some reader may have trouble to render page dimensions properly with the
    * result in inserting a blank page directly after. PocketBook is one of
    * those candiates. The issue seems to to occur randomly, especially on
    * recalculation after device rotation or changing the font size. For the
    * time being, the only real working solution is to wave and smile... */
  height: 100vh;
  height: 100svh;
  max-height: 100%; /* better safe than sorry */
  /** Though some readers like Thorium place the image on a separate page, they
    * calculate the distance of the height from the actual text position, which
    * results in the subsequent text being placed on the image-page behind the
    * image itself. overflow: hidden seems to tackle this issue. */
  overflow: hidden !important;
}

/* crucial to not overlap following text by the image */
.single-page img {
  /* match .single-page.v-center height */
  max-height: 100vh;
  max-height: 100svh;
}

Thanks for all your help - I'm pretty sure I can come up with another question in decent time