Search code examples
htmlmacoscssmomentum

Why does the scrollbar influence width of fixed/absolute elements but not static/relative

We noticed a strange behaviour with all browsers under OSX' when using the scrollbar "show automatically"-feature vs. "always visible" (see OSX settings->general).

If it's switched to "always", fixed/absolute elements with 100% are 15px less width than when switched to "automatically".

I can basically understand that the "always" scrollbar uses fixed space vs. the "automatic" scrollbar is some kind of overlaid over the content.

But why on earth does this matter to 

position:fixed/absolute

elements, but not to 

position:static/relative?

I made a fiddle to demonstrate the problem, however, you'll have to switch your system settings to notice it: https://jsfiddle.net/n4jtpwvw/

Desired end-result: the blue (#navigation) and red (#main) DIV should align perfectly, no matter the clients settings on scrollbar.

Solution

  • Elements with position fixed/absolute are generally taken out of the normal document flow. There's a good answer here of what's going on behind the scenes.

    As for your code, have a look at this updated jsfiddle, works for me when toggling that OSX option on and off

    https://jsfiddle.net/n4jtpwvw/1/

    .w1 {
  ...
  max-width: 300px;
  margin: 0 auto;
}

#navigationWrapper {
  ...
  max-width: inherit;
}

    I set a max-width on .w1 and auto margins. Then I took out the left and right properties from #navigationWrapper and let it inherit the max-width from .w1