Search code examples
htmlcsswebkitmozillaabsolute

Element %-positioning with different effect in webkit and mozilla

Safari and Chrome (webkit) both render absolutely positioned elements differently to firefox.

http://jsfiddle.net/9uswM/5/

<head></head>

<body>
    <div id="container">
        <div id="one"></div>
        <div id="two"></div>
    </div>
</body>


div#container {
    width: 600px;
}
div#one {
    height: 30%;
    width: 20%;
    background: green;
    margin-left: 13.5%;
    margin-top: 4%;
    position: absolute;
}
div#two {
    height: 30%;
    width: 20%;
    background: blue;
    margin-left: 3%;
    margin-top: 10%;
    position: absolute;
}

IMHO, the issue is with %-margin-top which (by definition) should relate to the width. This is correctly done in firefox but not in webkit based browsers.

Any help?

Solution

  • It's a known bug in webkit: https://bugs.webkit.org/show_bug.cgi?id=54613

    percentage based margin-top for an absolute positioned element is incorrectly computed based on the height of the viewport.

    As its status is RESOLVED FIXED I think it won't be a problem soon.