CODEWITHSUNDEEP
cssgoogle-chrome
Matt Dietsche
Matt Dietsche

Reputation: 608

CSS "position: fixed;" layout inconsistency in Chrome

Bear with me, as this requires a bit of explanation...

History: In order to create a fixed-width, 2-column layout with the right column fixed to the top of the window, I use the following general approach (this is conceptual code, not real).

HTML

<div class="wrap">
  <div class="left"></div><div class="right"></div>
</div>

CSS

.wrap { width: 1000px; }
.left { width: 700px; display: inline-block; }
.right {
  width: 300px;
  display: inline-block;
  position: fixed;
  top: 0;
  right: auto; }

The Problem: I have a site using this approach where the right container intermittently renders on top of the left container, instead of to the right of it as expected. This only happens in Chrome, and you may have to refresh the page a few times to see the problem.

Here's a link to the site

The Catch: I know that there are hundred things going on with that page, and that the "right: auto;" rule is dependent upon where the element would be positioned statically. However, if you inspect the right container in the dev tools (#sidebar in the DOM) and change it's CSS position from fixed to static, it jumps to the expected layout position. Then if you change it back to fixed, it stays there. That seems weird (buggy) to me.

The Bottom Line: It seems to me that Chrome is occasionally calculating the layout incorrectly when the page initially is drawn. I don’t know much about what order browsers handle calculations in when drawing a page, and am stumped as to why this would be happening or how to even begin debugging this issue. I'm hoping the particular circumstances would give someone who knows more about these things a clue as to where I could start looking.

Upvotes: 1

Views: 1112

Answers (2)

elad.chen
elad.chen

Reputation: 2425

I took a few minutes to create a proper layout for you.

I can't tell why this works in the first place, like I'v said in my comment:

The CSS specification requires that position:fixed be anchored to the viewport, not the containing positioned element.

Anyway here's what I came up with:

CSS:

/* In case a css reset is not used */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body { margin: 0 }

.container {
    width: 800px;
    margin: 0px auto;
    background-color: red;
}

#header {
    background-color: yellow;
    height: 180px; // Can be removed if should be automatically set
}

#header, #content {
    width: 555px;
}

#content {
    position: relative;
    z-index: 999;
}

#sidebar {
    position: fixed;
    width: 800px;
    top: 0;
}

#sidebar-content {
    float: right;
    width: 245px;
    background-color: blue;
    height: 900px;
}

HTML:

<div class="container">
    <div id="header">
        <!-- img tag goes here -->
    </div>
    <div id="content"></div>
    <div id="sidebar">
        <div id="sidebar-content">Test</div>
    </div>
</div>

Fiddle

Upvotes: 0

Max Novich
Max Novich

Reputation: 1169

I'm not sure why your initial bug happens, but as I see you have fixed width for #inner-wrap so get rid of display:inline-block on the #sidebar and instead of padding-left:75px on it do margin-left:630px. This should look exactly the same in all browsers.

Here is a fiddle

Upvotes: 2

Related Questions