Masonry.js – проблемы с адаптивностью и отображением Firefox и Opera

Сразу хочется отметить – Masonry.js не имеет ни каких проблем с отображением в Firefox, Opera и даже в IE. Все ошибки отображения, что обычно возникают, происходят из-за неправильных (или лишних) стилей, оставшихся от предыдущей разметки.

В одном из проектов столкнулся с проблемой – сетка Masonry.js в браузерах Firefox и Opera отображалась не корректно – блоки перекрывали друг друга.

Путем проб решение было найдено. Если у Вас в данных браузерах наблюдается такая проблема, но в Chrome работает все нормально – скорей всего проблема в стилях. В моем случае – пришлось убрать все старые стили сетки и не забыть добавить стандартные стили, рекомендуемые при подключении Masonry.js:

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

Скрипт их обрабатывал раньше, чем содержимое блока подгружалось и, в итоге, вся структура ломалась. Исправить данную проблему можно, запуская инициализацию скрипта после загрузки страницы:

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

Также, чтобы избежать проблемы, когда страница отрисовывается постепенно (особенно на сайтах нагруженных мультимедийным контентом), и посетителю отдается сначала страница, которую не обработал скрипт Masonry.js и разметка выглядит просто ужасно, после чего все стает на места не рекомендовал бы использовать в скрипте инициализации параметр:

Лучше все отступы перенести в CSS:

Используя такой способ, начальная разметка – до обработки скриптом – будет максимально похожа конечный результат, и постепенная обработка будет не так заметна.

Вот несколько нюансов и проблем, с которыми можно столкнуться при использовании Masonry.js. Надеюсь, советы помогут быстрее освоить замечательный плагин и сделать Ваши сайты еще красивее.

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *