Почему страница не всегда скролит до нужного якоря?

Question

[Федор Ашифин]

Всем привет! Столкулся с такой проблемой, вроде пустяк но как решить не знаю.
вот сайт https://id.rever.com.ua/ru/ в меню пукт Контакты с якорем #kontakt на странице на блок контактов id = "kontakt"
Все как бы работает но через раз раз доедет до контактов раз стопорится на Этапах предоставления услуг.
Может кто сталкивался с такой проблемой, в чем может быть затык?

Comments

[Антон Антон]

не префетчатся все картинки и блоки удлинняются

[ProjectSoft]

Вы используете lazyload, поэтому незагруженные картинки равны размеру 0х0
Чтобы избежать этого и картинка заняла нужный размер, нужно указать ширину картинки и задать свойство aspect-ratio (соотношение сторон)
Например картинка в контактах.

.kontakts-img img {
	display: block;
	height: auto;
	max-width: 350px;
	aspect-ratio: 175 / 377;
	width: 100%;
}

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

Это всё хорошо видно в DvTools

[Федор Ашифин]

ProjectSoft, Если хочешь, напиши отдельным ответом я отвечу решением

Answer 1

[ANKU]

Т.к. картинка прогружается позже - происходит сдвиг макета.
Варианты решения:

1. Поставьте атрибуты width / height для картинки, из них браузер поймет пропорции и зарезервирует место под изображение, что предотвратит сдвиги макета;
   
2. Установить aspect-ratio свойство, через css aspect-ratio: var(--width) / var(--height); или точные значения - не работает в IE;
   
3. Установить aspect ratio через дополнительную обертку с паддингом, в которой разместить изображение абсолютно. Типа div.ratio>img.absolute, в стилях для .ratio ставим padding-top: calc(100% / var(--width) * var(--height));