«Дергание» сайта

Дата публикации: 20.01.2011

Проблема

Если переключаться между страницами на одной из которой контента много, а на другой мало, в браузерах отличных от IE видим «дергание» сайта — смещение всего сайта на пару десятков пикселей. Особенно это заметно по элементам, расположенным справа (если сайт резиновый) или по всему сайту (если статично).

Теория

Во всех популярных браузерах за исключением Internet Explorer, вертикальная полоса прокрутки появляется только когда в этом есть необходимость, тем самым освобождая больше полезного пространства в окне браузера. Появление этой полосы прокрутки, при переходе со страницы, на которой ее не было, и приводит к такому смещению сайта. Аналогично будет смещение в обратную сторону, когда прокрутка спрячется при переходе с длинной страницы на короткую.

Решение

Принудительно показываем вертикальный скрол даже когда контента мало:

html {
	overflow-y: scroll;
}

Проверено в:

  • IE 6-8
  • Firefox 3.6
  • Opera 10.5
  • Safari 5
  • Chrome 6
Теги: