Здравствуйте, уважаемые знатоки.
Вот такой незамысловатый код.
Идеально отображается, наверное, на всех мобильных устройствах в любом браузере. Иконка на своём месте, текст на своём, всё с центрированием и отступами красивенько.
Однако у моей знакомой 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;
}
}
Простой
