CSS не применяется на устройствах iOS - PullRequest
Новая
       6

CSS не применяется на устройствах iOS

0 голосов
/ 20 сентября 2018

У меня странная проблема с рендерингом на устройствах iOS

это веб-сайт - http://dev.makeyourownbottle.com

Соответствующий CSS: 

.bottle-images {

    display: inline-flex;

}

.bottle-images img {
    width: auto;
}

.bottle img {

    width: 100%;
    padding: 0;
    position: relative;

}

.bottle p {

    position: absolute;
    font-family: 'Caveat', cursive;
    font-size: 30px;
    top: 19%;
    color: #006699;
    font-weight: 700;
    padding-left: 2px;
    margin-top: 2.4em;
}

.bottle {

    margin: 0 2px;

}

Соответствующий HTML: 

<div class="bottle-images"><span class="bottle"><img src="/images/first-b.png"><p>1</p></span><span class="bottle"><img src="/images/second-b.png"><p>5</p></span><span class="bottle"><img src="/images/third-b.png"><p>7</p></span></div>

У меня проблема с тем, что числа, отображаемые перед изображениями бутылок, не всегда отображаются сверху бутылок

Я тестировал различные модели телефонов через стек браузераи это определенно проблема iOS, это не происходит на Android, это не происходит на Windows или MacOS

enter image description here

Обратите внимание, что сайт был протестирован в Apple Storeс использованием разных устройств в середине июля 2018 года - там, где у нас вообще не было этой проблемы - он просто неожиданно появился сейчас

  1. На iPhone X - он иногда исправляется после загрузки CSS (послеоколо 1-2 секунд), иногда это не так.- как показано на рисунке, я только что загрузил сайт, и он отображается правильно, в других случаях это не так.
  2. Как показано на рисунке для iPhone 8, цифры неуместны при первоначальной загрузке, на iOSChrome, перемещая вверх и вниз по экрану, немедленно исправляет это, в Safari - нет, это соответствует iOS 7,8,8 Plus, которые я тестировал - iPhone X иногда корректно отображается при начальной загрузке.
  3. ОткрытиеИнструменты разработчика в стеке браузера немедленно исправляют это - поэтому я не знаю, что проверять (как только окно инструментов открывается, оно выравнивается правильно)
  4. Иногда нажатие кнопки «Обновить» в браузере исправляет его для последующих повторных загрузок,в других случаях он продолжает путать числа при каждой перезагрузке

enter image description here

Я переместил CSS вокруг, переместил классы в начало CSSчтобы увидеть, оказало ли это какое-либо влияние, это ничего не изменилоЕсть какая-то внутренняя ошибка рендеринга в iOS?

Я не могу определить причину / причину для этого - у кого-нибудь есть предложения?

1 Ответ

0 голосов
/ 20 сентября 2018

Я думаю, что это может быть вызвано из-за опции inline-flex.

Попробуйте это: 

.bottle-images {
    /* display: -ms-inline-flexbox; */
    /* display: inline-flex; */
    width: 84px;
    margin: auto;
}

.bottle-images:after {
    content: ' ';
    display: block;
    clear: both;
}

.bottle {
    margin: 0 2px;
    float: left;
}

Просто обновите ваш CSS, как это, и дайте мне знать, если это сработало.Надеюсь, это поможет.

...