Search code examples
cssgoogle-chromesafariwebkit

Webkit browsers not rendering position: relative correctly

I have a site which IE and FF render correctly but Chrome and Safari do not.

Here is the HTML:

<div class="cover">
</div>
<div class="nav">
</div>
<div class="misc">
</div>

Here is the CSS:

.cover{
position:absolute;
background-color:#00c9f8;
z-index:600;
height:100%;
}
.nav{
width:100%;
position:fixed;
top:0;
z-index:500;
}
.misc{
position:relative;
top:100%;
height:80%;
min-height:300px;
width:100%;
padding:0;
}

It would be expected that .cover will fill 100% of the viewport, which all browsers render correctly; .nav will be fixed at the top, which all browsers render correctly; and .misc will sit just off the viewport, which IE and FF renders correctly but Chrome and Safari do not. Webkit browsers instead make .misc sit at the top as if it had position: fixed.

In the example above .misc represents .orbit-wrapper in the actual site. Also the same problem exists for .menu-box-row, in which position: relative is not rendered correctly.

Many thanks in advance for a solution!

Solution

  • Percentage values used with relative positioning have been an issue in Webkit for awhile. You should be able to find a workaround by changing the .orbit-wrapper's position to absolute and then tweaking the other elements' styles accordingly to account for the disruption in your flow. Good luck.