Menu
I'm working locally on a personal project, and I started noticing my navigation disappearing sometimes when refreshing.
Here is a video of the navigation disappearing without me doing anything else than executing a normal refresh in Google Chrome https://gfycat.com/ElegantNaiveKid
If I refresh again, the navigation comes back to the normal position.
looked at my CSS and saw that my navigation had position: absolute; and right: 0px;, but the top property was not set.
When I write top: 0px; the inconsistent rendering stops.
This codepen is a litteral copy of the top of my page, with the exception of the <head>: http://codepen.io/anon/pen/RNXWKr
On my page the navigation is made with php like this:
<?php
$pages = [
"work" => "Work",
"about" => "About",
"contact" => "Contact",
"blog" => "Blog"
];
?>
<div class="navigation-container">
<div class="navigation centered">
<div class="signature"><a href="<?php echo $pageURL ?>"></a></div>
<ul>
<?php
foreach ($pages as $pageLink => $pageName) {
echo "<li><a href='$pageURL/$pageLink'>$pageName</a></li>";
}
?>
</ul>
</div>
</div>
And then the site gets it like this: <?php require_once("elements/navigation.php") ?>
So anyone knows why this happens? Is this a bug?
383
I think you are seeing an artifact due to the part of the CSS specification related to absolute positioning and the static-position containing block.
If the offsets are not specified in your CSS for position: absolute, then the browser computes the static-position containing block and uses that positioning for the offsets.
However, the CSS specification does not really say precisely how to determine the static-position containing block, and as a result, different browsers do it differently. It may be that Chrome has a somewhat fuzzy algorithm for the static-position computation and the result varies with refreshing the page.
As you notice, if you specify the top offset, the problem goes away because the static-position computation does not come into play.
You are not doing anything wrong, but just seeing the effects of a somewhat obscure part of the CSS specification.
Reference: http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#abs-non-replaced-width
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
