Search code examples
htmlcssiosiphonemedia-queries

Invisible layout on iPhone and iPad when CSS @media is applied

The problem could be simulated here: https://demo-bi.abra.eu/app/show

There should be this:

enter image description here

But on iPhone, or iPad there is this, but only on first load: enter image description here

On the second load all items are visible correctly, like in the first image.

Every item in list is affected by this CSS style:

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

I found out, that in case you delete the "@media" section, everything works fine and all items in list are visible:

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

The interesting thing is that the style is applied with or without @media query. So it should have no impact on that, but it does.

It is happening on any iPhone, iPad in Safari or Chrome.

Thanks for any answer.

Solution

  • couldn't recreate in chrome 'toggle device' it seems suspicious that reloading fixes the problem, maybe it doesn't relate to CSS but to JS. I will suggest changing the float to flex or grid anyways.