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

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

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

Шляхом проб рішення було знайдено. Якщо у Вас в даних браузерах спостерігається така проблема, але в Chrome працює все нормально – скоріше всього проблема в стилях. У моєму випадку довелося прибрати всі старі стилі сітки і не забути додати стандартні стилі, рекомендовані при підключення Masonry.js:

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

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

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

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

Краще все відступи перенести в CSS:

Використовуючи такий спосіб, початкова розмітка – до обробки скриптом – буде максимально схожа кінцевий результат, і поступова обробка буде не так помітна.

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

 

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *