iBooks misaligns floated elements when they fall on a page break

[libraryhead]

iBooks frequently (but not universally) moves floated elements such as drop caps out of position when they fall immediately after a pagination-generated page break. The misalignment resolves if you change font settings such that the float no longer falls at the top of the page.

[libraryhead]

adding a minimum height to the para and page-break-inside:avoid seem to reduce the frequency somewhat, but not totally resolve

[dvschultz]

can you provide any markup samples? I would be interested in playing with this one.

[teytag]

CSS codes and XHTML elements are important. Can you share this codes with us?

[libraryhead]

Here's a chunk of the HTML

            <div class="method">
            <p><span class="step-num">1 </span>Soak rice noodles according to package directions; drain.</p>
            <p><span class="step-num">2 </span>Meanwhile, in a very large skillet heat oil over medium-high heat. Add chicken; cook and stir for 8 to 10 minutes or until chicken is no longer pink, adding stir-fry vegetables for the last 4 minutes of cooking. Remove chicken mixture from skillet.</p>
            <p><span class="step-num">3 </span>In the same skillet combine coconut milk, the water, sugar, fish sauce, curry paste, salt, and pepper. Bring to boiling. Stir in rice noodles and chicken mixture. Return to boiling; reduce heat. Simmer, uncovered, about 2 minutes or until noodles are tender but still firm and sauce is thickened. Sprinkle with basil.</p>
            </div>

and all the relevant CSS

/*from the reset*/
p {
    margin: 0;
    padding: 0;
    border-width: 0;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-indent: 0;
    text-align: left;
    font-size: 1em;
    line-height: 1.4;
    widows: 2;
    orphans: 2;
}
div.method {
    margin-top:1em;
}
div.method p {
    font-family:"Seravek", "Helvetica Neue", sans-serif;
    margin-bottom:1em;
    page-break-inside:avoid; 
    min-height:3em; 
}
span.step-num {
    color: #C4323D;
    font-size:2.918em;
    float:left;
    line-height:1;
    margin-top:0.09em;
    margin-right:0.15em;
    margin-bottom:-0.3em;
    font-family:"Glypha LT Std", serif;
    font-weight:bold;
}

[teytag]

Hi libraryhead,

Solution demo epub download: http://www.teyid.org/testet/#22042014

Codes:

<style type="text/css" media="screen">
        p {
            margin: 0;
            padding: 0;
            border-width: 0;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            text-decoration: none;
            text-indent: 0;
            text-align: left;
            font-size: 1em;
            line-height: 1.4;
            widows: 2;
            orphans: 2;
        }
        div.method {
            margin-top:1em;
        }
        div.method p {
            font-family:"Seravek", "Helvetica Neue", sans-serif;
            margin-bottom:1em;
            page-break-inside:avoid; 
            min-height:3em; 
        }
        span.step-num {
            color: #C4323D;
            font-size:2.918em;
            float:left;
            line-height:0.95em; /* old line: line-height:1; */
            /*
            margin-top:0.09em;
            margin-right:0.15em;
            margin-bottom:-0.3em;
        */
            font-family:"Glypha LT Std", serif;
            font-weight:bold;
        }
    </style>
<div class="method">
        <p><span class="step-num">1 </span>Soak rice noodles according to package directions; drain.</p>
        <p><span class="step-num">2 </span>Meanwhile, in a very large skillet heat oil over medium-high heat. Add chicken; cook and stir for 8 to 10 minutes or until chicken is no longer pink, adding stir-fry vegetables for the last 4 minutes of cooking. Remove chicken mixture from skillet.</p>
        <p><span class="step-num">3 </span>In the same skillet combine coconut milk, the water, sugar, fish sauce, curry paste, salt, and pepper. Bring to boiling. Stir in rice noodles and chicken mixture. Return to boiling; reduce heat. Simmer, uncovered, about 2 minutes or until noodles are tender but still firm and sauce is thickened. Sprinkle with basil.</p>
    </div>

Solution picture from iBooks iPad:

Solution picture from iBooks MacIntel:

[libraryhead]

Interesting -- so you think it's the negative margin-bottom in the drop cap? Those margins came out of InDesign. I'll give it a try squeezing line-height instead.

[libraryhead]

I really wish this would have worked, but no: alignment is off for all step-nums and the page-break problem is still there.

[teytag]

Hi libraryhead, I don't use InDesign for a while create EPUB. Only editor app TextMate... This solution is very clear. This second solution codes below and download EPUB file: http://www.teyid.org/testet/#22042014

XHTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Float First Letter and Page Break</title>
    <style type="text/css" media="screen">

        h1{
            page-break-before:always;
        }

        .firstLetter > p:first-of-type:first-letter {
            text-indent: 0em;
            font-size: 4em;
            color: #990000;
            float: left;
            line-height: .8;
            margin: 0 .1em 0 0;
            padding: 0;
            font-weight: normal;
            page-break-inside:avoid;
        }

    </style>
</head>

<body>
    <div class="chapter">
        <h1>Float First Letter and Page Break</h1>

        <div class="firstLetter"><p>1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p></div>

        <div class="firstLetter"><p>2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p></div>

        <div class="firstLetter"><p>3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p></div>

    </div>
</body>
</html>

On iBooks picture:

[libraryhead]

Based on data from the iBooks Inspector, I believe this problem is related to the user stylesheet property html {-webkit-line-box-contain: block glyphs replaced;}. There is a CSS Inline Layout Module Level 3 draft spec at http://dev.w3.org/csswg/css-inline/ which discusses the line-box-contain property, but my testing has not been able determine which values will correct the alignment without affecting other elements such as images.