Oddly, I checked the stylesheet for
Harry Potter: A Journey Through a History of Magic. If I go through and delete the postitioning and viewport sizing bits, it does render better as a reflowable ebook though it is very ugly compared to the original displayed with an epub3 renderer.
If we look at a sample <p>...</p> block, the styles applied to every letter are positioning them within the viewport, controlling the width, etc.
Code:
<div class="liw nw c18DD c7" style="font-size:0;top:1506px;min-width:99px;line-height:22px;z-index:293">
<span class="w c160 f16" style="width:98px"><span class="c160 c10B c" style="width:12px"> B</span><span style="font-size:12px" class="c160"><span class="c c160 c163">L</span><span class="c c160 c1F">O</span><span class="c c160 c1F">O</span><span class="c c160" style="width:13px">M</span><span class="c c160" style="width:7px">S</span><span class="c c160 c163">B</span><span class="c c160 c1F">U</span><span class="c c160" style="width:9px">R</span><span class="c c160 cD">Y </span></span></span>
</div>
All this to place BLOOMBURY on the page.
In another sample sample <p>...</p> block, the positioning codes are applied to words.
Code:
<div class="liw c7 c6E c70 c6F c44 c45 c46 c47 c48 cAC cAD cAE cAF cB0 cC9D" style="top:820px">
<span class="w cC96 f22 c71" style="width:170px"> different. </span><span class="w f22 c71" style="width:160px;letter-spacing:.58px">Gnomes, </span><span class="w c14A c141 f22 c71">or </span><span class="w f32 c71 c78" style="width:181px;letter-spacing:1.12px">Gernumbli </span><span class="w c21 cC96 c16E f32 c71 c78">gardensi</span>
</div>
All this to place: "Gnomes, or Gernumbli gardensi" on the page.
I ran a simple regex that deleted everything with 0 from the css files. It made for an unreadable page on any renderer.