«Дергание» сайта
Дата публикации: 20.01.2011
Проблема
Если переключаться между страницами на одной из которой контента много, а на другой мало, в браузерах отличных от IE видим «дергание» сайта — смещение всего сайта на пару десятков пикселей. Особенно это заметно по элементам, расположенным справа (если сайт резиновый) или по всему сайту (если статично). Узреть воочию (клацать ссылки в верхнем меню).
Теория
Во всех популярных браузерах за исключением Internet Explorer, вертикальная полоса прокрутки появляется только когда в этом есть необходимость, тем самым освобождая больше полезного пространства в окне браузера. Появление этой полосы прокрутки, при переходе со страницы, на которой ее не было, и приводит к такому смещению сайта. Аналогично будет смещение в обратную сторону, когда прокрутка спрячется при переходе с длинной страницы на короткую.
Решение
Принудительно показываем вертикальный скрол даже когда контента мало:
html { overflow-y: scroll; }
Демо пример. Проверено в:
- IE 6-8
- Firefox 3.6
- Opera 10.5
- Safari 5
- Chrome 6