webkitRegionOverflow giving random value

• Component: CSS
• Status: RESOLVED DUPLICATE

[Johannes Wilm]

It seems that there is a bug in Chromium/Webkit that makes webkitRegionOverflow output random values. At times it says it fits, when it doesn't and at other times it says overflow, when it really does fit. The overset property of a NamedFlow gives the same random result.

The below code shows how I try to add new pages based on whether the previous is full. 

You can check out the full example by including the JS/CSS from this project:https://github.com/sourcefabric/BookJS


function setupDocument() {
    $('body').wrapInner('<div id="contents" />');
    $('body').append('<div id="layout" />');
    $('#layout').append('<div class="page"><div class="contents"></div><div class="pagenumber"></div></div>');
}

$(document).ready(function () {
    setupDocument();
    var lastColumnState;
    var fillingPages = true;
    setTimeout(function () {
        while (fillingPages == true) {
            lastColumnState = $(".page:last .contents")[0].webkitRegionOverflow;
            if (lastColumnState == 'overflow') {
                $('#layout').append('<div class="page"><div class="contents"></div><div class="pagenumber"></div></div>');
            } else if (lastColumnState == 'fit' || lastColumnState == 'empty') {
                fillingPages = false;
            }
        }
    }, 1000);

});

[Mihai Balan]

This bug is a duplicate of #93965.
The cause for this odd behavior seems to be the use of «position: relative» on the content that gets flowed in the regions.

[Mihai Balan]

Regarding webkitRegionOverflow being 'overflow' instead of 'fit', this most probably is caused by the part of the content *below* the text baseline that's (usually) invisible for the user, but still causes overflow. This last situation would be a lot trickier to fix, unfortunately :(

[Johannes Wilm]

*** This bug has been marked as a duplicate of bug 93965 ***