Распространенная ошибка верстки: тестируем горизонтальную прокрутку

в 8:52, , рубрики: css, web-разработка, Веб-разработка, верстка сайтов, метки: , ,

Эта ошибка крошечная и незаметная, но все же, это ошибка. Она присутствует на чудовищном количестве сайтов, в т.ч. на Хабрахабре.

Проблема возникает с фоновыми изображениями у элементов, которые тянутся на всю ширину окна браузера. Например, подвал Хабрахабра. Если уменьшить окно браузера до появления горизонтальной прокрутки и крутить вправо, то фон может просто обрубиться.

На Хабрахабре эта проблема не очевидна (фон всегда есть под текстом), поэтому привожу более наглядный пример:
image

Самый простой способ устранения ошибки — установить min-width на body.

Я лишь хочу напомнить разработчикам про этот мелкий баг, т.к. он действительно очень распространен, даже на сайтах веб-студий (смотрю выдачу гугла по запросу «разработка сайтов» и обнаруживаю ошибку на трех сайтах из пяти).

Автор: Siberia

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js