html - 应用CSS @media时iPhone和iPad上的不可见布局

这个问题可以在这里模拟：
https://demo-bi.abra.eu/app/show

应该是这样的：



但是在iPhone或iPad上有此功能，但仅在首次加载时：


在第二次加载时，所有项目都是正确可见的，就像在第一张图像中一样。

列表中的每个项目都受此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查询，都可以应用样式。因此，它应该对此没有影响，但是确实有影响。

它发生在Safari或Chrome浏览器中的任何iPhone，iPad上。

感谢您的回答。

最佳答案

无法在Chrome浏览器“ toggle设备”中重新创建，重新加载可解决此问题似乎令人怀疑，也许它与CSS不相关，但与JS有关。无论如何，我建议将float更改为flex或grid。