Почему код на странице правильно отображается во всех браузерах, кроме приложения Google Chrome на Realme 11 Pro +?
Здравствуйте, уважаемые знатоки.
Вот такой незамысловатый код.
Идеально отображается, наверное, на всех мобильных устройствах в любом браузере. Иконка на своём месте, текст на своём, всё с центрированием и отступами красивенько.
Однако у моей знакомой Realme 11 Pro+, и вот тут я немного расстроился.
Весь дальнейший текст опирается только на данный телефон, да и меня волнует только отображение на данном телефоне. Будем называть этот телефон коротко R11.
1) В R11 в приложении Google Chrome отображение конкретно хромает. Обновил до последней версии - всё равно хромает.
2) Пробовал различные html-обёртки, как для всего этого html-кода, так и для отдельных тегов, использовал разные стили для классов - бесполезно.
3) Обнаружил, что при удалении <span class="sentence-icon"> из html, отображение на сайте становится отличным снова.
4) Обнаружил, что без удаления <span class="sentence-icon"> , но при удалении стилей у класса sentence-icon, тоже отображение на сайте становится отличным.
P.S.
Выходит, собака зарыта именно в этом фрагменте <span class="sentence-icon">, но для решения проблемы на R11 не помогает ни изменение стилей, ни обёртки в html. Единственное, чего я ещё не пробовал, это выводить иконку через тег img, но не хочется использовать этот метод из-за лишних заморочек с валидацией html и проч.
В консоли Google Chrome - никаких ошибок. При валидации - так же нет ошибок. В эмуляторе Google Chrome на различных мобильных и планшетных устройствах - всё отлично отображается. А вот на реальном R11 - ерунда какая-то.
Вы спросите: "А как выглядит эта ерунда"? Да просто представьте себе сломанный по вертикали дизайн, когда из соседних блоков элементы просто смешиваются, как винегрет, и дёргаются при этом ещё, будто конвульсия.
В какую сторону мне копать посоветуете? Или мне сразу застрелиться?
<div class="sentences"> <div class="sentence"><span class="sentence-icon"></span><span class="sentence-text">Мы приедем к Вам очень скоро, только ждите</span></div> <div class="sentence"><span class="sentence-icon"></span><span class="sentence-text">Мы всё сделаем быстро в Вашем присутствии </span></div> <div class="sentence"><span class="sentence-icon"></span><span class="sentence-text">Мы умнее Вас в восемьдесят пять и более раз</span></div> <div class="sentence"><span class="sentence-icon"></span><span class="sentence-text">Мы гарантируем, что Вы кайфанёте или сломаете голову</span></div> </div> @media (max-width: 767px) { .sentences { margin: 2.188rem 0 2.813rem 0; padding: 0; text-align: center; display: flex; flex-direction: column; align-items: center; } .sentences .sentence { margin: 0 auto 0.938rem auto; max-width: 80%; display: flex; align-items: center; flex-direction: row; justify-content: center; } .sentence .sentence-icon { display: inline-block; font-family: "Font Awesome 6 Free"; font-weight: 900; line-height: 1.1; vertical-align: middle; width: 4.25rem; height: 4.25rem; min-width: 4.25rem; margin-right: 0.625rem; background: url("/img/check-mark.svg") no-repeat border-box; background-size: 100% 100%; flex-shrink: 0; flex: none; } .sentence-text { display: inline-block; margin-left: 0.625rem; text-align: left; } } |
<div class="sentences"> <div class="sentence"><span class="sentence-icon"></span><span class="sentence-text">Мы приедем к Вам очень скоро, только ждите</span></div> <div class="sentence"><span class="sentence-icon"></span><span class="sentence-text">Мы всё сделаем быстро в Вашем присутствии </span></div> <div class="sentence"><span class="sentence-icon"></span><span class="sentence-text">Мы умнее Вас в восемьдесят пять и более раз</span></div> <div class="sentence"><span class="sentence-icon"></span><span class="sentence-text">Мы гарантируем, что Вы кайфанёте или сломаете голову</span></div> </div> @media (max-width: 767px) { .sentences { margin: 2.188rem 0 2.813rem 0; padding: 0; text-align: center; display: flex; flex-direction: column; align-items: center; } .sentences .sentence { margin: 0 auto 0.938rem auto; max-width: 80%; display: flex; align-items: center; flex-direction: row; justify-content: center; } .sentence .sentence-icon { display: inline-block; font-family: "Font Awesome 6 Free"; font-weight: 900; line-height: 1.1; vertical-align: middle; width: 4.25rem; height: 4.25rem; min-width: 4.25rem; margin-right: 0.625rem; background: url("/img/check-mark.svg") no-repeat border-box; background-size: 100% 100%; flex-shrink: 0; flex: none; } .sentence-text { display: inline-block; margin-left: 0.625rem; text-align: left; } }
Дополнительно:
А куда смотреть то?
я вот попробовал такой вариант для проверки.
<div class="sentences"> <div class="sentence"><span class="sentence-icon sentence-icona"></span><span class="sentence-text">Мы приедем к Вам очень скоро, только ждите</span></div> <div class="sentence"><span class="sentence-icon sentence-icona"></span><span class="sentence-text">Мы всё сделаем быстро в Вашем присутствии </span></div> <div class="sentence"><span class="sentence-icon sentence-icona"></span><span class="sentence-text">Мы умнее Вас в восемьдесят пять и более раз</span></div> <div class="sentence"><span class="sentence-icon sentence-icona"></span><span class="sentence-text">Мы гарантируем, что Вы кайфанёте или сломаете голову</span></div> </div> |
<div class="sentences"> <div class="sentence"><span class="sentence-icon sentence-icona"></span><span class="sentence-text">Мы приедем к Вам очень скоро, только ждите</span></div> <div class="sentence"><span class="sentence-icon sentence-icona"></span><span class="sentence-text">Мы всё сделаем быстро в Вашем присутствии </span></div> <div class="sentence"><span class="sentence-icon sentence-icona"></span><span class="sentence-text">Мы умнее Вас в восемьдесят пять и более раз</span></div> <div class="sentence"><span class="sentence-icon sentence-icona"></span><span class="sentence-text">Мы гарантируем, что Вы кайфанёте или сломаете голову</span></div> </div>
.sentence-icon { font-family: "Font Awesome 6 Free"; font-weight: 900; line-height: 1.1; vertical-align: middle; width: 4.25rem; height: 4.25rem; min-width: 4.25rem; margin-right: 0.625rem; background-repeat: no-repeat; background-size: cover; background-position: center; } .sentence-icona { background-image: url("/img/check-mark.svg"); } |
.sentence-icon { font-family: "Font Awesome 6 Free"; font-weight: 900; line-height: 1.1; vertical-align: middle; width: 4.25rem; height: 4.25rem; min-width: 4.25rem; margin-right: 0.625rem; background-repeat: no-repeat; background-size: cover; background-position: center; } .sentence-icona { background-image: url("/img/check-mark.svg"); }
и представьте, дизайн на R11 не ломается, если не применяю стили класса sentence-icona. стоит только применить стили класса sentence-icona, то есть вывести на страницу img/check-mark.svg, дизайн тут же ломается.
будто дело может быть конкретно в svg... и именно на R11. мистика какая-то...
Я сейчас ещё попробую убрать из html <span class="sentence-icon"> , сделаю иконку псевдо-элементом before для <span class="sentence-text"> и изменю параметры высоты и ширины с rem на em . Посмотрю , как R11 на это отреагирует .
Если дефект останется , я Вам с Вашего позволения в Telegram скриншот скину , когда владелица телефона проснётся . У неё в телефоне всё на отпечатке пальца , я даже не могу скрин дефекта отображения на странице оттуда вытащить .
признателен за доброе пожелание, только удача мне в этом случае вряд ли поможет.
Я бы проверила настройки шрифтов. Например, если там задан большой минимальный размер шрифта, больше предполагаемого, вполне может ломаться.
Или что-то в таком духе.
background: url("/img/icons/check-mark.svg") no-repeat border-box; |
background: url("/img/icons/check-mark.svg") no-repeat border-box;
А проблема появляется, как только подгружаем на страницу конкретно этот стиль
Значит, проверяем:
1. Что будет с другой картинкой. Что будет просто с фоном цветом?
2. Узнаем зачем вообще используем background-clip, если бордера отродясь не было.
3. Переписываем свойство bg нормально. Либо всё в краткое свойство либо всё по частям
4. Убираем все шрифтовые параметры
5. Меняем пустой спан на псевдо (ну это так, для порядка)
Дальше тестируем следующую группу:
1. Убираем флекс, а для иконки задаем инлайн-блок. Проверяем.
2. Выясняем зачем две обертки sentence и sentence__container, когда достаточно одной
и т.д.
Другой вариант вместо align-items: center; у sentence__container задать align-self элементам. Или аналогично гридами.
p.s. и я бы уменьшила иконки
Из первой группы не понял, 2 и 3 пункт. Или боюсь не так понять.
1 пункт - другой svg даёт такой же результат, растр не загружал, ибо результат нужен не для растра. залил цветом - не ломается, как и ранее писал - если не подгружаем svg, ничего не ломается.
4 пункт проделывал - без результата.
5 пункт - проделывал - без результата.
Вторая группа уже мной выполнялась - без результата.
Из первой группы не понял, 2 и 3 пункт. Или боюсь не так понять.
2. Зачем вы используете background-clip?
Впрочем, дело не в нём, но тогда я не видела скрина.
Хотя и так и так вопрос актуальный, зачем писать заведомо лишнее.
3. У вас часть свойств фона записана в краткой записи, а потом пачка отдельных. Перепишите аккуратно. Либо туда либо сюда.
Опять же, дело не в этом, но зачем каша в коде.
если не подгружаем svg, ничего не ломается
Довольно странно. Потому что фон все равно не может вылезти из своего блока или как-то влиять на его размеры и жизнь вообще. Разве что ошибки в самом коде.
Но можно попробовать background-size сделать contain вместо %
Я перепробовал все варианты background-size - нет результата. Странно - это не то слово. И самое главное - я не знаю, кто виноват - Realme или Google Chrome...
Я видел этот код на Nokia 5.3, Redmi 6A, Redmi 8A и на части Айфонов - ни в одном браузере на этих телефонах не ломается дизайн страницы.
Простите меня за грязноту кода. видите ли, я сижу кручу html и css то так, то сяк, пытаясь понять происходящую конкретно на этом телефоне мистику. и то, что Вы видите - это одна из проб моего кручения кода.
Я сейчас буду все Ваши советы пробовать и обязательно отпишусь подробнейшим образом.
Всё, выкуриваю сигарету и берусь дальше греть голову с помощью Ваших советов.
подключите шнурком к компу и проинспектируйте в девтулзах
вот это я оставлю на десерт, никогда такое ещё не делал.
Пока что:
укоротил html-код.
сделал отображение иконки псевдо-элементом снова, и это опять ничего не дало.
Перед тем, как пробовать gap и дальнейшую игру с флексами, гридами, я бы хотел уточнить у Вас про background-clip. Я сделал даже поиск по своим css-файлам, не нашёл такого кода. Как у Вас появился вопрос про background-clip ?
3. Переписываем свойство bg нормально. Либо всё в краткое свойство либо всё по частям
И вот эту цитату я не понял. Вот так будет плохо?
.sentence__text:before { width: 3.25em; height: 3.25em; min-width: 3.25em; margin-right: 0.625rem; content: ""; background: url("/img/icons/check-mark.svg") no-repeat; background-size: 100% 100%; } |
.sentence__text:before { width: 3.25em; height: 3.25em; min-width: 3.25em; margin-right: 0.625rem; content: ""; background: url("/img/icons/check-mark.svg") no-repeat; background-size: 100% 100%; }
там было так
spoiler
псевдо удобнее делать от sentence, а не от спана...
вот это очень хороший совет. вполне соглашусь, минус 4 единицы из DOM. что-то не сообразил. я с этой поломкой уже озабочен лишними обёртками.
я пробовал и так
background: url("/img/icons/check-mark.svg") no-repeat border-box; |
background: url("/img/icons/check-mark.svg") no-repeat border-box;
и так
background: url("/img/icons/check-mark.svg") no-repeat; |
background: url("/img/icons/check-mark.svg") no-repeat;
, это вообще ничего не дало, удаление no-repeat тоже ничего не дало.
Сейчас вот владелец Realme 11 Pro+ домой придёт, буду пробовать игру флексов и гридов. А то при малейшем изменении всё пишу владельцу, чтобы обновил страницу и отписался мне.
Сейчас вот владелец Realme 11 Pro+ домой придёт, буду пробовать игру флексов и гридов. А то при малейшем изменении всё пишу владельцу, чтобы обновил страницу и отписался мне.
угу, а там просто какой-нибудь дикий кэш каких-нибудь файлов стилей
угу, а там просто какой-нибудь дикий кэш каких-нибудь файлов стилей
этого не может быть, у меня динамическая css-ка. вот когда я от отчаяния взялся редактировать svg-файл и перезаливать на хостинг, вот тут я, конечно, уже попросил владельца очистить историю. но это тоже ничего не дало.
то есть я имел в виду, что не может кэш на что-то влиять, потому что css динамическая. малейшее изменение в стилях - на стороне клиента сразу новая версия.
а после редактирования svg, полностью попросил очистить всё, включая кэш, чтобы отредактированный svg был актуален, потому что версионность фотографий не использую.
Попробуйте сделать sentences гридом с row-gap. Ну или флексом тоже с gap.
Другой вариант вместо align-items: center; у sentence__container задать align-self элементам. Или аналогично гридами.
Попробовал все эти варианты. Увы, та же поломка.
Я уж не знаю, что придумать .
Вот так - ломается.
.sentence:before { width: 3.25em; height: 3.25em; min-width: 3.25em; margin-right: 0.625rem; content: ""; background: url("/img/icons/check-mark.svg") no-repeat; background-size: 100% 100%; } |
.sentence:before { width: 3.25em; height: 3.25em; min-width: 3.25em; margin-right: 0.625rem; content: ""; background: url("/img/icons/check-mark.svg") no-repeat; background-size: 100% 100%; }
Вот так - не ломается.
.sentence:before { width: 3.25em; height: 3.25em; min-width: 3.25em; margin-right: 0.625rem; content: ""; background-size: 100% 100%; } |
.sentence:before { width: 3.25em; height: 3.25em; min-width: 3.25em; margin-right: 0.625rem; content: ""; background-size: 100% 100%; }
Самый, что ни на есть, парадокс. Одна строчка
background: url("/img/icons/check-mark.svg") no-repeat; |
background: url("/img/icons/check-mark.svg") no-repeat;
ломает всё.
Смешно, что другие иконки тоже через background подгружены абсолютно аналогичным способом, но они ничего не ломают.
spoiler
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 926 926'%3E%3Cpath d='M428.5 922.495c-141.687-10.43-271.104-86.38-349.959-205.38C42.395 662.568 18.184 601.301 8.156 539c-5.356-33.267-5.61-36.721-5.6-76 .009-39.18.388-44.405 5.597-77 12.653-79.174 48.626-156.766 102.69-221.5 9.58-11.472 42.904-44.779 54.657-54.63C244.316 43.804 341.006 5.905 440.472 2.09c68.865-2.643 125.252 6.14 186.343 29.026 27.322 10.236 63.094 28.009 71.034 35.293 12.699 11.65 12.37 31.016-.726 42.79-10.56 9.494-20.915 10.209-35.623 2.46-53.222-28.041-92.03-40.802-148.5-48.83-22.452-3.192-76.893-3.226-100-.062-94.41 12.925-173.221 52.367-238.5 119.36C100.105 258.475 60.65 355.992 60.86 463c.185 93.864 29.92 178.485 88.55 252 23.809 29.852 62.854 65.04 95.09 85.692 53.721 34.417 106.924 53.47 173 61.95 21.843 2.805 73.201 2.537 95.477-.496 69.127-9.414 129.713-32.985 183.205-71.276 113.2-81.033 176.63-212.154 168.936-349.22-.653-11.632-1.616-24.075-2.139-27.65-4.3-29.378-7.832-46.167-14.092-67-2.23-7.425-4.298-15.784-4.593-18.575-1.607-15.171 10.497-29.78 25.825-31.17 10.65-.965 20.79 3.497 26.8 11.792 5.988 8.267 16.818 48.798 22.165 82.953 6.523 41.67 6.665 96.858.358 139-10.41 69.553-37.338 137.307-77.253 194.374-39.298 56.184-90.967 103.671-149.222 137.145-80.161 46.06-171.649 66.808-264.467 59.976zm-43.388-226.076c-15.06-4.05-25.23-13.05-46.24-40.919-43.436-57.619-118.108-168.647-123.076-183-6.987-20.186 9.505-42.5 31.41-42.5 7.685 0 14.962 3.177 24.465 10.68 16.273 12.849 23.847 18.688 39.329 30.321 33.632 25.271 73.752 53.006 76.65 52.987 1.946-.012 7.452-4.486 50.35-40.918C560.338 379.17 652.78 290.489 791.964 143.5c41.954-44.307 39.883-42.603 52.66-43.311 15.003-.831 27.514 10.054 29.088 25.312 1.072 10.385.348 11.626-47.552 81.499-113.274 165.236-207.728 286.69-304.067 390.985-7.374 7.983-30.1 31.212-50.5 51.62-40.126 40.14-43.168 42.605-57.492 46.577-7.923 2.197-21.296 2.306-28.989.237z' fill='%231acf15' transform='translate(-2)'/%3E%3C/svg%3E"); |
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 926 926'%3E%3Cpath d='M428.5 922.495c-141.687-10.43-271.104-86.38-349.959-205.38C42.395 662.568 18.184 601.301 8.156 539c-5.356-33.267-5.61-36.721-5.6-76 .009-39.18.388-44.405 5.597-77 12.653-79.174 48.626-156.766 102.69-221.5 9.58-11.472 42.904-44.779 54.657-54.63C244.316 43.804 341.006 5.905 440.472 2.09c68.865-2.643 125.252 6.14 186.343 29.026 27.322 10.236 63.094 28.009 71.034 35.293 12.699 11.65 12.37 31.016-.726 42.79-10.56 9.494-20.915 10.209-35.623 2.46-53.222-28.041-92.03-40.802-148.5-48.83-22.452-3.192-76.893-3.226-100-.062-94.41 12.925-173.221 52.367-238.5 119.36C100.105 258.475 60.65 355.992 60.86 463c.185 93.864 29.92 178.485 88.55 252 23.809 29.852 62.854 65.04 95.09 85.692 53.721 34.417 106.924 53.47 173 61.95 21.843 2.805 73.201 2.537 95.477-.496 69.127-9.414 129.713-32.985 183.205-71.276 113.2-81.033 176.63-212.154 168.936-349.22-.653-11.632-1.616-24.075-2.139-27.65-4.3-29.378-7.832-46.167-14.092-67-2.23-7.425-4.298-15.784-4.593-18.575-1.607-15.171 10.497-29.78 25.825-31.17 10.65-.965 20.79 3.497 26.8 11.792 5.988 8.267 16.818 48.798 22.165 82.953 6.523 41.67 6.665 96.858.358 139-10.41 69.553-37.338 137.307-77.253 194.374-39.298 56.184-90.967 103.671-149.222 137.145-80.161 46.06-171.649 66.808-264.467 59.976zm-43.388-226.076c-15.06-4.05-25.23-13.05-46.24-40.919-43.436-57.619-118.108-168.647-123.076-183-6.987-20.186 9.505-42.5 31.41-42.5 7.685 0 14.962 3.177 24.465 10.68 16.273 12.849 23.847 18.688 39.329 30.321 33.632 25.271 73.752 53.006 76.65 52.987 1.946-.012 7.452-4.486 50.35-40.918C560.338 379.17 652.78 290.489 791.964 143.5c41.954-44.307 39.883-42.603 52.66-43.311 15.003-.831 27.514 10.054 29.088 25.312 1.072 10.385.348 11.626-47.552 81.499-113.274 165.236-207.728 286.69-304.067 390.985-7.374 7.983-30.1 31.212-50.5 51.62-40.126 40.14-43.168 42.605-57.492 46.577-7.923 2.197-21.296 2.306-28.989.237z' fill='%231acf15' transform='translate(-2)'/%3E%3C/svg%3E");
чисто посмеяться, а если заинлайнить
Попробовал - ничего хорошего не произошло.
______________________________________________________________________
Внимание, теперь поинтереснее.
Изначально было:
.sentence:before { width: 4.25rem; height: 4.25em; min-width: 4.25rem; margin-right: 0.625rem; content: ""; background: url("/img/icons/check-mark.svg") no-repeat; background-size: 100% 100%; } } |
.sentence:before { width: 4.25rem; height: 4.25em; min-width: 4.25rem; margin-right: 0.625rem; content: ""; background: url("/img/icons/check-mark.svg") no-repeat; background-size: 100% 100%; } }
Вы бы уменьшили кружочки, мы уменьшили их для Вас так.
.sentence:before { width: 3.25rem; height: 3.25em; min-width: 3.25rem; margin-right: 0.625rem; content: ""; background: url("/img/icons/check-mark.svg") no-repeat; background-size: 100% 100%; } } |
.sentence:before { width: 3.25rem; height: 3.25em; min-width: 3.25rem; margin-right: 0.625rem; content: ""; background: url("/img/icons/check-mark.svg") no-repeat; background-size: 100% 100%; } }
И вот так как я за трое суток много чего перепробовал, дошёл наконец до этого.
.sentence:before { width: 3.25rem; height: 3.25em; min-width: 3.25rem; margin-right: 0.625rem; content: ""; background: url("/img/icons/check-mark.svg") no-repeat; background-size: 99% 99%; } } |
.sentence:before { width: 3.25rem; height: 3.25em; min-width: 3.25rem; margin-right: 0.625rem; content: ""; background: url("/img/icons/check-mark.svg") no-repeat; background-size: 99% 99%; } }
Блок с иконками, который с классом sentences, теперь отображается там, где надо и хотя бы он больше не ломается, нормально выглядит во всех браузерах на всех мобильных устройствах, даже на Realme 11 Pro+.
Но так как у нас до сих пор подтягивается злополучным стилем
background: url("/img/icons/check-mark.svg") no-repeat; |
background: url("/img/icons/check-mark.svg") no-repeat;
, то поломка дизайна страницы на Realme 11 Pro+ ещё остаётся. Только поломанным теперь остаётся лишь вот этот блок.
<div class="container basic-info bs"> <div class="basic-info__part-one"> <div class="logo"><a href="/"><img src="/img/computer-master-moscow-pro-logo.svg" alt="Компьютерный мастер Москва.PRO" title="Перейти на главную страницу | Компьютерный мастер Москва.PRO" rel="home" style="width: 100%; height: 100%"></a></div> <div class="location-city"><span class="location-city__style location">Москва и Подмосковье </span></div> </div> <div class="basic-info__part-two"> <div class="offer"><span class="offer__style">Компьютерный мастер на дом | в офис </span><span>доступен в Москве и Московской области </span><span class="hidden-xs hidden-md"><a class="phone phone-m" href="tel:+79255290003">+7 925 529 000 3</a></span></div> <div class="hours-work"><span class="hours-work__style">График часов работы </span><span>Пн-Вс 9:00-21:00 </span><span>ежедневно, без выходных, без обеда </span></div> </div> </div> |
<div class="container basic-info bs"> <div class="basic-info__part-one"> <div class="logo"><a href="/"><img src="/img/computer-master-moscow-pro-logo.svg" alt="Компьютерный мастер Москва.PRO" title="Перейти на главную страницу | Компьютерный мастер Москва.PRO" rel="home" style="width: 100%; height: 100%"></a></div> <div class="location-city"><span class="location-city__style location">Москва и Подмосковье </span></div> </div> <div class="basic-info__part-two"> <div class="offer"><span class="offer__style">Компьютерный мастер на дом | в офис </span><span>доступен в Москве и Московской области </span><span class="hidden-xs hidden-md"><a class="phone phone-m" href="tel:+79255290003">+7 925 529 000 3</a></span></div> <div class="hours-work"><span class="hours-work__style">График часов работы </span><span>Пн-Вс 9:00-21:00 </span><span>ежедневно, без выходных, без обеда </span></div> </div> </div>
Нет слов. Теперь буду смотреть мобильные стили этого блока.
Но всё равно по прежнему парадокс, что ни один блок не ломается даже на Realme 11 Pro+ , если не применяем этот стиль
background: url("/img/icons/check-mark.svg") no-repeat; |
background: url("/img/icons/check-mark.svg") no-repeat;
В моём случае проблема решилась регулированием background-size у иконки.
Однако вопрос парадокса всё равно остался открытым. Благодаря замечательному куратору Ankhena , которому я премного благодарен за участие, интерес и терпение, просто переделал часть кода CSS у трёх блоков, и всё стало сколько-то да лучше.
Ответы:
вот 2 скрина. один на весь экран , второй наполэкрана. в стилях смотри.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы понять, почему код на странице правильно отображается во всех браузерах, кроме Google Chrome на Realme 11 Pro +, мы должны рассмотреть несколько возможных причин и способов решения проблемы.
Возможная причина №1: Кэширование данных
Возможно, что на вашем устройстве Realme 11 Pro + данные о странице были кэшированы, и браузер Google Chrome не обновляет их корректно. Для решения этой проблемы попробуйте очистить кэш браузера Chrome на устройстве Realme 11 Pro +.
Возможная причина №2: Проблемы с версией браузера
Возможно, что установленная версия браузера Google Chrome на устройстве Realme 11 Pro + имеет какие-то конфликты или ошибки, которые мешают правильному отображению кода на странице. Попробуйте обновить браузер до последней версии или переустановить его.
Возможная причина №3: Неправильное отображение из-за особенностей устройства
Realme 11 Pro + может иметь свои собственные особенности или настройки, которые могут влиять на отображение веб-страниц. Убедитесь, что настройки браузера Chrome на устройстве Realme 11 Pro + не блокируют какие-то элементы страницы.
Для того чтобы уточнить причину и найти решение проблемы, вам также стоит проверить следующее:
- Проверьте код на странице на наличие ошибок или несовместимостей с браузером Chrome на устройстве Realme 11 Pro +.
- Убедитесь, что CSS стили не блокируют отображение кода на странице.
- Попробуйте использовать инструменты разработчика в браузере Chrome на устройстве Realme 11 Pro + для отладки и анализа проблемы.
Если после всех этих действий проблема остается, возможно, стоит обратиться к поддержке Google Chrome или Realme для получения дополнительной помощи и консультации.