Иконка на пол экрана в момент загрузки сайта?

Question

[ALEX]

На вордпресс-сайте при загрузке страницы иконка поиска вылазит на пол-экрана, это происходит пару десятых секунды и потом она становится на свое место. Никак не получается исправить это. Что может быть причиной такого?

Answer 1

[Орхан Гасанлы]

Здравствуйте!
Причиной является то, что:
1) иконка большого размера
2) ограничение размеров иконки задано при помощи css
3) пока загружается страница и загрузятся отдельные файлы (css, js), а затем уже стили применяются к странице. Вот, на этот временной интервал вы видите большую иконку

Comments

[ALEX]

Иконка подгружается с внешнего источника и имеет формаи svg, подскажите пожалуйста как можно пофиксить это?

[i_m]

ALEX,

в < head >
пропишите для нее стиль напрямую напр:
<style>
 .класс-иконки{width:100px;}  // нужный размер иконки
</style>

[Орхан Гасанлы]

Смотрите в сторону генерации критичного CSS (добавляется в заголовок документа).
Или же можете добавить preloader. И на время загрузки страницу пользователь ничего не увидит помимо прелоадера и соответственно, не заметит изъянов

[Kostya10295]

ALEX, пропишите иконке атрибуты width и height

Answer 2

[Степан Воеводин]

попробуйте вместо viewbox у svg воспользоваться wight и height.