Почему прыгает контент и мигают картинки?

Question

[Anton Essential]

Добрый вечер господа!
Подскажите пожалуйста, или даже скажите что я делаю не так.
Заметил что при обновлении страницы в гуглхроме, когда подгружается контент он как бы так подпрыгивает,
или растягивается от подогрузки содержимого, и такой странный эффект получается не очень приятный для глаз ,в общем не понятно,
и когда первый раз после загрузки или обновления страницы навожу курсор на элемент у которого есть бекграунд картинка мигает при повторном и последующем наведении такого не случается.
Вот по этому линку можно по-рефрешить браузер что бы было понятно о чем я.
Контент: зоголовок, input, button, обзац, которые находятся в елементе с чайником.
Не придавал этому значение до вчерашнего дня, просмотрел свои работы, оказывается везде такой движ.
Получается что я как то неправильно верстаю, потому что для сравнения открываю другие сайты везде вроде гуд,
мои же скачут.
Из файлов подключен только reset.css, для структуры использовал haml для стилей stylus все компилируется на лету через codekit, получается что скорее всего где то мои косяки.

Answer 1

[Евгений Петров]

Потому, что при наведении грузится другая картинка. При первом наведении её ещё нет в кеше и на время загрузки ничего не видно. Так давно не делают.

Во-первых, есть спрайты и при наведении меняется лишь положение фона.
Во-вторых, такие кнопки уже реализуются с помощью CSS без избражений.

Comments

[Anton Essential]

Конечно можно сделать кнопку на цсс и по ховеру задать ей тень и изменить цвет, добавить плавный транзишн, но там бекграунд у кнопки с рисунком, аааааа хотя стоп, я же могу просто задать кнопке и бекграунд и фон а по ховеру изменить только фон тогда будет все гуд, но у меня есть еще кнопки в меню у которых иконки на бекграунде которые должны менять цвет они все равно будут мигать их то на  css я не замучу

[Евгений Петров]

А то, что background может состоять из нескольких картинок, вы не знаете? А про псевдообласти известно?

[Anton Essential]

Спрайтам не поставишь транзишн наверное ) это что ж получится, плавная смена спрайта)

[Евгений Петров]

@AntonEssential о какой конкретно кнопке идёт речь?

[Anton Essential]

Кнопки которые без каких либо иконок и картинок я всегда делаю на чистом css, мне как то сам факт картинок не очень приятен, лишние запросы, размеры, нагрузки, касаемо спрайтов, они какие то очень резкие, но дизайнеру иногда хочется сделать кнопки с цветочками или с иконками не шрифтовыми а просто иконками какими ему заблагорассудится, и эта кнопка имеет 2 позиции актиная и нет, мне же хочется сделать эту активность плавной, когда нет иконки отрабатывают тени и цвета с транзишином и все хорошо , но как вы писали иконки при первом наведении нет в кеше и что делать фиг знает получается. Иконка как факт должна быть и мне хочется что бы она плавно менялась при наведении вместе с тенями и фоном.

[Anton Essential]

Псевдоклассы, псевдоелементы, псевдоселекторы знаю, псевдообласти не знаю

[Евгений Петров]

@AntonEssential слова вы знаете, а как использовать нет. Вот вам пример с png и плавной сменой. Использован спрайт.

codepen.io/cleric/pen/eLmyw

[Anton Essential]

Спасибо большое за совет, всё понял, возможно подскажите еще что делать с контентом, почему он так подгружается как бы растягиваясь, возможно нужно указывать фиксированные размеры и позиционирование.

[Евгений Петров]

@AntonEssential у вас для #content .desk-desk input стоит transition на все свойства. Вот он плавно высоту и меняет. Вы определитесь — что там плавно меняется и пропишите только эти правила.

[Anton Essential]

) Спасибо еще раз, получается что транзишн нужно прописывать только к ховеру, когда я пишу транзишн к ховеру элемент появился плавно но когда я убрал мыш он резко отрабатывает, по этому я задавал транзишн и элементу на который приходился ховер, в этом и была моя ошибка ) получалось что при загрузки он читал транзишины на элементах.

[Евгений Петров]

@AntonEssential и вот ещё — можно пользоваться animation (запускать 1 раз), и можно параметры фоновых изображений менять codepen.io/cleric/pen/iHlhn

[Евгений Петров]

@AntonEssential нет, не нужно ховеру — он пропадает резко при уводе курсора.
Нужно только для тех правил, которые должны меняться плавно.

[Евгений Петров]

@AntonEssential

#content .desk-desk input{
	transition: border-color, box-shadow, ease-in-out .3s;
}

Answer 2

[vdem]

Дело в том, что в момент, когда пользователь открыл страницу и собирается навести указатель мыши на кнопку, ее hover изображение еще не загрузилось. Надо делать preload.
UPD: Потому она и мигает: старое изображение уже пропало, а новое еще не появилось (не загрузилось).

Comments

[sireshko]

Совершенно верно.

Answer 3

[Александр Таратин]

Блок с копирайтом не читабелен, добавьте ему фон чтоли.

Comments

[Anton Essential]

Спасибо, возьму на заметку