Изменить цвет фона тела с высотой: 100%

Question

У меня есть странная проблема с моим личным сайтом. Позвольте мне объяснить контекст:

У меня есть несколько штабелированных разделов, которые должны быть (каждая) той же высоты, что и окно браузера. То есть, если окно браузера имеет высоту 500 пикселей и у меня есть 5 разделов, весь сайт будет 500 * 5 = высота 2500 пикселей.

Если я просто определяю свои разделы с height: 100%, они остаются 0px height. Для того, чтобы решить, что я использовал следующий трюк:

html, body { 
    height: 100%; 
} 

Таким образом, контейнер из секций (тело) также имеет высоту окна браузера 100%, так что мои участки теперь имеют нужную высоту.

Но после этого я хочу, чтобы цвет фона тела менялся в зависимости от того, в каком разделе мы находимся. Это вызывает странную проблему. Цвет не изменяется логически. Лучше посмотрите на my website. Это, похоже, связано с тем фактом, что тело на самом деле меньше моего сайта. Помните, что мое тело имеет высоту 100% (например, 500 пикселей) и мой сайт 100% * количество секций (2500 пикселей). Но я не уверен в этом, потому что пытался воспроизвести ошибку on a simple fiddle, и я не могу.

Любопытно, что если вы наведете указатель мыши на мой логотип сайта (с анимацией перехода, связанной с преобразованием вращения), фон изменит его цвет правильно. Что-то связанное с обновлением веб-сайта, я полагаю.

Кстати, цвет тела также меняется с переходом, но вы можете отключить его на инспекторе, если хотите. Кажется, это не проблема.

Если вам нужна дополнительная информация, пожалуйста, обратитесь за ней. Спасибо за вашу помощь и внимание.

PS: Это происходит в Chrome 32. В Firefox все работает. Поэтому сравните оба браузера, чтобы лучше понять проблему, если хотите.

Answer 1

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

Я поместил все разделы внутри div под названием «основное содержание» (на сайте). Тогда я также определил этот div с высотой: 100% (в противном случае трюк высоты перестает работать). Затем я определяю перед pseudoelement с этим CSS:

#main-content:before { 
    content: ""; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: -1; 
    -webkit-transition: background-color $speed; 
    -moz-transition: background-color $speed; 
    -o-transition: background-color $speed; 
    -ms-transition: background-color $speed; 
    transition: background-color $speed; 
} 

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