2

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.

Raphael Jeger
  • 5,024
  • 13
  • 48
  • 79

1 Answers1

1

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

Community
  • 1
  • 1
alliuca
  • 396
  • 2
  • 13
  • Thanks! I'll try this asap. Did you look at your fiddle on an iPhone? Strange things happen to "navigation" when scrolling back up... – Raphael Jeger Jun 16 '16 at 21:34
  • I was able to adapt your code to the real HTML, thanks so much! – Raphael Jeger Jun 17 '16 at 17:31
  • you're welcome! as for the iPhone, there's often some quirkiness going on when using fixed elements. One of the things I found useful to do is to remove the bounce effect when scrolling to the top of the page, in some cases it sort viewport's calculations out. [This](https://github.com/timbartsch/no-bounce) is a nice script. – alliuca Jun 18 '16 at 09:53