I am facing an issue with the positioning of two div elements. The first one has a height of 40% and the second one has a height of 60%. I have set the first element to be positioned at top: 0; and the second one at bottom: 0;. However, in Webkit browsers, there seems to be a random 1px gap between them sometimes.
To recreate this issue, I have created a demo on jsFiddle:
http://jsfiddle.net/bVxDA/ (Resize the window to see the bug)
Here is the code snippet I am using:
HTML
<div id="cover-top"></div>
<div id="cover-bottom"></div>
CSS
html, body {
background: red;
height: 100%;
}
#cover-top,
#cover-bottom {
background: #000;
position: absolute;
width: 100%;
}
#cover-top {
height: 40%;
top: 0;
}
#cover-bottom {
height: 60%;
bottom: 0;
}
I am open to solutions that involve JavaScript or jQuery to fix this issue.