В чем может быть проблема, верстка расплывается по экрану телефона?

Question

[Максим]

Ссылка на верстку: https://1kles.ru/migsnab/3.html

Проблема заключается в том, что при обновлении страници или быстром нажатии кнопок (например в футоре) верстка начинается прыгать по всему экрану. При скроленге может все стабилизироваться и выглядеть нормально. Подскажите в чем может быть проблема? Баг только в мобильной версии и на телефонах.

Протестировал на: хром, яндекс, телеграм вью. Проблема не на всех устройствах. В частности на xiaomi 11 pro - она есть.
---

Comments

[Vladislav Efimov]

Такая же ерунда. Сталкивался на Samsung S21+ с браузером Edge, в остальных не проверял. Перешёл на Poco X6 Pro, поставил тоже Edge, пару раз сталкивался на некоторых сайтах с поехавшей вёрсткой, но последнюю неделю как будто нет проблемы. Может исправили в обновлениях браузера, не знаю.

Answer 1

[Kolt_DA]

Здравствуйте! На моём проекте есть очень похожая проблема. Полностью решить её я не смог, но в моем случае, причиной стали иконки. Конкретно, .svg у которых есть stroke. Звучит странно, но реально из-за этого были похожие визуальные приколы. Собственно, их удаление или замена на .svg без stroke ,решает проблему.

Answer 2

[Yaroslav Rsx]

На iphone 12 все замечательно отображается, в microsoft egde в режиме разработчика(f12) при переключении на отображение с телефона тоже все супер.
Так же ты можешь настроить индивидуально под проблемные модели смартфонов размер элементов на странице с помощью CSS:

/* Для экранов с шириной меньше 768 пикселей (например, мобильные устройства) */
@media (max-width: 767px) {
    .product-card {
        width: 100%; /* Занимает всю доступную ширину */
    }
}

Comments

[Максим]

Там проблема не в ширине экране. Например, на одной и той же версии браузера, на разных телефонах, может быть этот баг а может и не быть.
Xiaomi 12 pro - все ок
Xiaomi 8 pro - баг
Xiaomi 11 - баг
Tecno - баг
И этот баг может пропасть если пролистать страницу вниз и вернуться обратно.
Возможно это косячная верся хрома, но я сомневаюсь

[sudo rm -rf /]

Максим, а браузеры те же или отличаются? Может, viewport отличается?

Answer 3

[Rrdx]

Специально зарегистрировался, столкнулся с той же проблемой. Везде отображается хорошо, проблема только на мобильном хроме в смартфоне infinix. Методом тыка пытался найти источник проблемы, удаляя блоки, целые куски CSS, не удалось, потратил уже более 5 часов на поиск. Крайне странная проблема, иногда зайдёшь нормально, обновишь страницу начинается этот глюк. В следующий раз зайдёшь сразу глюк, проскролишь вниз, нормально, проскролишь вверх, опять глюк. Подписываюсь на вопрос.

Comments

[Максим]

Да, проблема только на мобильном хроме. Если скачать версию dev (15****) вроде ее пофиксили, но сколько ждать выхода релиза, неизвестно.
Но я думаю это косяк в самой верстке.

[Rrdx]

Я не думаю что это косяк в верстке, просто что-то в вёрстке вызывает этот глюк, но что - непонятно. У меня из всех работ на одной работе такое. Но как я не силился, как не перепроверял несколько раз код, не нашёл причину. Проблема усложняет то, что смартфона, на котором проблема у меня нет, брал у знакомого на время.

Что касается вашей вёрстки выше, то никаких проблем не наблюдаю на своём android 11 на motorola.

Добавлено. на infinix проблемы есть

[IgorAlentyev]

Точно такая же проблема у меня. Брейв, хром. При чем даже на хабре подобная проблема. Тут написали что из за свг иконок со свойством stroke. Проверю, отпишусь. Сам грешил на флексбокс но хз.

Answer 4

[IgorTikhomirov]

Редми 12, андроид 14.
Всё аккуратно сверстано.
Не плывёт.

Comments

[IgorTikhomirov]

На хроме и в Яндекс браузере.
Других нет на телефоне (

Answer 5

[RomanLarionov]

Ловил такой баг на разных сайтах. Это проблема хрома. Тоже самое на яндекс браузере работает без проблем. Телефон realme 11 pro

Answer 6

[shsv382]

Похоже как будто заголовок поиска и кнопки выбора категорий сделаны с position fixed и большим z-index. Я бы копал отсюда

Answer 7

[MiyuHogosha]

это беда с зависимостями браузера от некоторых компонент в сборке ОМ. вполне возможноичто плохо воспринимаются какие-то ассеты. Глюки врде этих являютя черным пятном на их репутации

Answer 8

[kujoro]

похожая ерунда, такое происходит в комментариях на хабре или вот на яндексе. redmi note 11s от злости хотелось телефон разбить, как оказалось проблема реально хрома

Answer 9

[Alexprog1]

Наверно автору уже не актуально, но может кому пригодится. У меня такая же проблема была. Нашёл решение.
У меня стояла высота для каждого блока height: 100vh. Поставил height: 100%, всё пришло в норму.

Также пишут, что нужно добавить display: inline-block. Но у меня без этого всё получилось.