Я использую систему сетки Bootstrap и генерирую несколько столбцов с помощью цикла WordPress (возможно, не относящейся к делу информации, но я упоминаю об этом на всякий случай).Генерируемая структура выглядит следующим образом:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
...
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
...
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
...
</div>
</div>
</div>
Вот как она должна отображаться (как col-xs-12) на экранах мобильных устройств:
+--------------+
| COLUMN |
| |
| |
+--------------+
+--------------+
| COLUMN |
| |
| |
+--------------+
+--------------+
| COLUMN |
| |
| |
+--------------+
Так иногда и отображается:
+--------------+
| COLUMN |
+--------------+
| COLUMN |
+--------------+
| COLUMN |
| |
| |
+--------------+
... нижний столбец перекрывает столбец выше.Это происходит в 1 из 3 случаев, поэтому это очень важно.Если существует около 12 столбцов, количество разбитых столбцов может быть разным.Иногда все они выглядят красиво.Иногда только первые три выглядят хорошо, а остальные перекрываются, иногда только последние два перекрываются.
Это заставило меня подумать, что это какая-то проблема с загрузкой (если страница загружается достаточно быстро, тогда отображаются столбцытак, как они должны делать, и наоборот), но я использую точно такую же библиотеку Bootstrap, как и всегда, и столбцы выдают точно такие же атрибуты CSS, как всегда.Я использую библиотеку Isotope .js для динамической фильтрации, но я попытался полностью отключить ее (так как она меняет CSS Bootstrap по умолчанию), и проблема не исчезла.
PS: в настольной версии Chrome (с эмуляцией для мобильных устройств)включен) всегда хорошо.Он перекрывает только Android-версию Chrome (пока не было возможности протестировать его на других платформах).