Куда деваются 17px в chrome в ширине body?

Question

[Goshanbo]

Доброго времени суток, тостеровчане.
Дело в том, что в режиме адаптивного дизайна выставляя одинаковые ширины окон в FF и хроме ширина тега body будет разной. В хроме она будет на 17px меньше чем ширина окна.

А в FF всё нормально

Из-за этого такие значения как margin-left/right или right/left будут по разному отображать картинку и сложно достичь pixel perfect.
Раньше решал эту проблему выставляя body width: 100vw; Но при таком подходе если высота страницы больше чем высота окна - появляется горизонтальный скролл в хроме, так и не понял откуда он появляется.

Как вы решаете эту проблему.
Если же у вас её нету, то какими средствами вы пользуетесь чтобы достичь кроссбраузерности.

Заранее благодарю за ответы.

p.s.
Использую бутстрап 4 в который вшит normalize.css.

Comments

[Lynn «Кофеман»]

Вангую скроллбар

Answer 1

[ⓒⓢⓢ]

попробуйте задействовать overflow: overlay для html или body это заставит скролл быть поверх страницы (не занимать место), работает не во всех браузерах.

Раньше решал эту проблему выставляя body width: 100vw; Но при таком подходе если высота страницы больше чем высота окна - появляется горизонтальный скролл в хроме, так и не понял откуда он появляется.

100vw = 100% размер окна не учитывая размер скролла, вот и получается, что скролл не вмещается в размеры окна, поэтому появляется горизонтальная прокрутка.

Ещё вы можете узнать размер скролла с помощью calc(100vw - 100%)
Пригодиться, если отнимать или суммировать с другими значениями, чтобы вычесть размер скролла когда он есть и отнимает место на странице

Comments

[Goshanbo]

Спасибо за ответ.
Теперь понятно куда пропадают эти 17px.
Этот вопрос мучал меня меня достаточно долго. Ещё раз спасибо.