search

dvschultz / 99problems

99 Problems and e-reader rendering are all of them
60 stars 3 forks source link

Kobo iOS does not support percentage-based absolute positioning in FXL if body has `position: relative` #48

Closed elmimmo closed 8 years ago

elmimmo commented 9 years ago

Note: this bug is actually a consequence of https://github.com/dvschultz/99problems/issues/49

In EPUB 3 FXL, if the body element has the CSS property position, its implicit width becomes zero in Kobo iOS. As a consequence, descendants with percentage-based absolute positioning relative to the page (i.e. not contained within another element with an explicit position property) are always placed in the top-left corner of the viewport (i.e., top: 0; left; 0;).

An XHTML file with this markup:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=500, height=500"/>
    <meta charset="UTF-8"/>
    <title>Percentage-based absolute positioning</title>
    <style type="text/css">
        body{
            width:500px;
            height:500px;
            margin: 0; 
            position: relative;
        }
        .textFrame {
            position: absolute;
            left: 20%;
            top: 40%;
        }
    </style>
</head>
<body>  
    <div class="textFrame">
        <p>Lorem ipsum dolor sit amet,<br/>consectetur adipisicing elit.</p>
    </div>
</body>
</html>

displays correctly in a browser and Kobo for Mac 3.12.0 running on OS X 10.10.3, but not so in Kobo for iOS 7.4 on an iPad 3 running iOS 8.1.3 (not tested on any other Kobo app/device):

kobo for mac kobo for ios percentage-based positioning

(This issue describes only the positioning bug illustrated in the screenshot. The reason why the text box in Kobo iOS, besides being in a wrong position, has its lines broken after each word is described in https://github.com/dvschultz/99problems/issues/49 )

Removing the bodyelement's CSS property position corrects the issue in Kobo for iOS, but breaks it on desktop browsers.

You might have added position: relative along with width and height in px to the body for the purpose of previewing such pages in a desktop browser for editing or QA purposes. Desktop browsers have windows of variable size and disregard the viewport dimensions' declaration. Therefore, descendant elements whose dimensions and positions are percentage-based relative to the body would not display correctly on desktop browsers, unless body has explicit width and height in px and position. Ereaders, having fixed viewport sizes, do not need those, but having them present or not should make not difference for ereaders provided the body CSS dimensions match those of the viewport meta tag.

elmimmo commented 8 years ago

Fixed in Kobo for iOS 7.8