Почему ширина полосы прокрутки фиксированных/абсолютных элементов, но не статична/относительна

Question

Мы заметили странное поведение со всеми браузерами под OSX при использовании полосы прокрутки «автоматически показывать» -feature vs. «always visible» (см. Настройки OSX -> общий).

Если он переключен на «всегда», фиксированные/абсолютные элементы со 100% на 15 пикселей меньше ширины, чем при переключении на «автоматически».

В основном я понимаю, что «всегда» полоса прокрутки использует фиксированное пространство по сравнению с «автоматической» полосой прокрутки, которая накладывается на содержимое.

Но почему на земле делает этот вопрос на

position:fixed/absolute 

элементов, но не

position:static/relative? 

Я сделал скрипку, чтобы продемонстрировать эту проблему, однако, вы должны переключить систему установки для его замещения: https://jsfiddle.net/n4jtpwvw/

Желаемый конечный результат: синий (#navigation) и красный (#main) DIV должны идеально совпадать, без матовых настройки клиентов на полосе прокрутки.

Answer 1

Элементы с фиксированным/абсолютным положением обычно выводятся из нормального потока документов. Хороший ответ here того, что происходит за кулисами.

Что касается вашего кода, посмотрите на этот обновленный jsfiddle, работает для меня, когда переключая этот вариант OSX и выключаться

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

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

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

я установить максимальную ширину на .w1 и автоматические поля. Затем я вытащил левую и правую свойства из #navigationWrapper и дал ей наследовать максимальную ширину от .w1