Невидимый макет на iPhone и iPad при применении CSS @media - PullRequest
Новая
       4

Невидимый макет на iPhone и iPad при применении CSS @media

0 голосов
/ 23 января 2020

Проблема может быть смоделирована здесь: https://demo-bi.abra.eu/app/show

Должно быть это:

enter image description here

Но на iPhone или iPad это есть, но только при первой загрузке: enter image description here

При второй загрузке все элементы видны правильно, как на первом изображении.

На каждый элемент списка влияет стиль CSS: 

@media (min-width: 26.25rem) {
.app-main-page-layout .igate-list-sorted .igate-list-pageslist-item {
    max-width: none;
    float: left;
    width: 50%;
}}

Я обнаружил, что в случае удаления раздела "@media" все работает нормально и все элементы в списке видны: 

.app-main-page-layout .igate-list-sorted .igate-list-pageslist-item {
        max-width: none;
        float: left;
        width: 50%;
    }

Интересно то, что стиль применяется с запросом @media или без него. Так что это не должно влиять на это, но это так.

Это происходит на любом iPhone, iPad в Safari или Chrome.

Спасибо за любой ответ.

1 Ответ

1 голос
/ 23 января 2020

не удалось воссоздать в chrome 'переключающем устройстве', кажется подозрительным, что перезагрузка решает проблему, возможно, это относится не к CSS, а к JS. В любом случае я предлагаю изменить float на flex или grid.

...