Google Play splits HTML pages in unexpected places

[makeBetterEBooks]

Google Play will split some HTML pages at arbitrary points for "performance reasons". Breaks are consistent across devices and even across versions of the ePub.

[dvschultz]

does this split lead to issues? (CSS not rendering correctly, poorly rendered markup). I could imagine using something like :nth-child would cause problems if they split your HTML doc in the middle.

[makeBetterEBooks]

You don't even need to have random splits in the HTML to end up with pseudo class failures. http://bjhollingum.blogspot.com/2014/01/bug-chasing-in-google-play-books.html

[JayPanoz]

How it works (at least for cloud reader but it seems consistent with the app’s behavior).

1. to achieve pagination, Play Books slices contents (so that it can be put it into divs, which are loaded into iframes);
2. your CSS is actually loaded in the head of each iframe, “combined” with the classes Google creates and uses (see 3);
3. their paginator is called “ocean” and there are classes like “df6eof8op” created on the fly, in order to “scope” your styles;
4. you end up with .df6eof8op p:first-of-type::first-letter;
5. there are HTML5 custom elements to manage widows/orphans for instance…

In other words, it's the perfect example of file alteration which can go insanely wrong since, for instance, your html { font-size: 62.5%; }, on which all your rem sizes depend, becomes .df6eof8op html { font-size: 62.5%} in Play Books. So yeah, that's not root anymore…

tl;dr: it's somehow like a simplistic implementation of CSS Regions using iframes, divs and dynamically scoped CSS selectors.