I seem to have found a weird edge case where it seems that a child element is using the parent width as a top margin percentage instead of the height.
It also happens on chrome and firefox, so is this an expected behavior? If so, why would the height ever derive from the width?
To see the bug, shape a browser to be taller than it is wide, then open code below.
I would expect the child div to be off screen but it isn’t. If the browser is wider than it is tall, the div is further off screen than it should. It is only in the right position if the browser is perfectly square.
<html>
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
div.parent {
position: absolute;
width: 200%;
height: 100%;
}
div.a {
position: absolute;
background-color: red;
width: 50%;
height: 100%;
}
div.child {
background-color: orange;
margin-top: -100%;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="parent">
<div class="a">
<div class="child">
</div>
</div>
</div>
<script type="text/javascript">
why = $('.child').position().top + $('.child').height()
console.log(why)
what = $('.child').position().top + $('.child').width()
console.log(what)
</script>
</body>
</html>
From the CSS box model spec:
A little weird but I’m sure they had a reason.