Почему не работает корректно плагин isotope на Iphone и Android?

Question

[Alex Ivanov]

Добрый вечер, всем!
Подскажите пожалуйста в чем проблема плагина Isotope на отображениях с мобильного устройства? с Iphone и Android показывает сплюснутые фотографии на сайте, котором установил его Best Quest
Вот скриншот для примера:

Возможно из Вас кто сталкивался с подобным уже?

Спасибо!

Comments

[Rustam Bainazarov]

В Android Chrome всё в порядке:


Ну а проверить остальное не могу, так как в пути.

[Alex Ivanov]

Рустам Байназаров, у меня Xiaomi и хром и всё отлично работает.(правда Xiaomi не совсем и андроид))
Скринами за бросал заказчик.
Уже и кэш на телефоне чистил у него. Бесполезно (((

[Rustam Bainazarov]

Alex_vs_Predator, MIUI — абсолютно и полностью Android.

Я посмотрю, что в Safari сегодня. У вас, кстати, нет доступа к Safari?

[Rustam Bainazarov]

Alex_vs_Predator, в вообще, быстрый фикс — сделать блок с замком соотношения сторон, а картинку — на абсолютном позиционировании внутри.

[Alex Ivanov]

Рустам Байназаров, к сожалению нету ничего к сафари.

[Alex Ivanov]

Рустам Байназаров, блок с замком, имеете ввиду задать высоту и ширину фиксированную, я правильно понял?

[Rustam Bainazarov]

Alex_vs_Predator, имею в виду сделать такое:

.quest-block__link {
position: relative;
margin: 0 auto 27px;
}

.quest-block__link:before {
content: "";
display: block;
padding-bottom: 141.3242%;
}

.quest-block__link img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

[Rustam Bainazarov]

Но это не факт, что будет работать, надо попробовать.

[Rustam Bainazarov]

Alex_vs_Predator, о, вот:
https://stackoverflow.com/questions/8622906/isotop...

Тупо обернуть инициализацию.

[Rustam Bainazarov]

Alex_vs_Predator, вот так, наверное, лучше будет:

.isotope {
    -webkit-transition-property: height,width;
    -o-transition-property: height,width;
    transition-property: height,width;
    width: 100%;
}

.isotope .isotope-item {
    -webkit-transition-duration: .8s;
    -o-transition-duration: .8s;
    transition-duration: .8s;
    width: 25%; /* тут размер элемента сетки по media-запросам */
}

.quest-block__link {
position: relative;
margin: 0 auto 27px;
width: 100%;
}

.quest-block__link:before {
content: "";
display: block;
padding-bottom: 141.3242%;
}

.quest-block__link img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

[Rustam Bainazarov]

У меня с этими CSS считает верно:

[Alex Ivanov]

Рустам Байназаров, сейчас по пробую и скажу

[Alex Ivanov]

Рустам Байназаров, не вариант
Isotope сам весь на абсолютах построен.
И из-за того что ставлю

.quest-block__link img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Всё ломается, а точнее картинки исчезают вообще

[Rustam Bainazarov]

Alex_vs_Predator, должно работать, вот тебе рабочий пример.

Для пущего эффекта вообще с твоей картинкой и адаптивностью. Сжимай окно — все будет адаптироваться и пересчитываться. И это с учетом абсолютно позиционированной картинки внутри и flex-разметкой:

.grid {
  display: flex;
  flex-flow: row wrap;
}

.element-item {
  flex: 0 0;
  width: calc(20% - 10px);
  margin: 0 0 10px 0;
  position: relative;
}

.element-item:before {
  /* формирователь соотношения сторон + задает габариты, которые будет считать Isotope */
  content: "";
  padding-bottom: 141.3242%; /* процентное соотношение сторон картинок */
  display: block;
}

.element-item img {
  /* картинка на абсолюте, как видишь */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.element-item p,
.element-item h3 {
  /* скрываем тексты внутри, они для сортировки нужен только (код инициализации из их официального примера просто */
  display: none;
}

/* адаптивность */
@media (min-width: 768px) and (max-width: 1200px) {
  .element-item {
    width: calc(25% - 10px);
  }
}

@media (min-width: 400px) and (max-width: 767px) {
  .element-item {
    width: calc(33.333% - 10px);
  }
}

@media (max-width: 399px) {
  .element-item {
    width: calc(50% - 10px);
  }
}

[Rustam Bainazarov]

Alex_vs_Predator, это всё нужно, чтобы габариты блоков изначально были просчитаны с помощью CSS и не зависели от скорости прогрузки картинок. В итоге, у Isotope будет вся нужная информация заранее. И ошибок в расчетах из-за отсутствия габаритов не будет иметь место.

[Alex Ivanov]

Рустам Байназаров, понял.
Спасибо большое за помощь!!!

[Rustam Bainazarov]

Alex_vs_Predator, ответ писать? :))

[Alex Ivanov]

Рустам Байназаров, как пожелаете))

[Rustam Bainazarov]

Alex_vs_Predator, да почему бы и нет, LOL.

[Rustam Bainazarov]

Alex_vs_Predator, мда, сообщение вне темы уже давно закрытого вопроса, но… я тут заметил на этом сайте (на баннере квеста) свою одногруппницу. Мир тесен, и это очень смешно.

Answer 1

[Rustam Bainazarov]

Проблема из-за того, что Isotope не дожидается загрузки изображения, которое формирует габариты, и начинает строить сетку.

Можно сделать на хаке соотношения сторон и абсолютно позиционированной картинки. Это нужно, чтобы габариты блоков изначально были просчитаны с помощью CSS и не зависели от скорости прогрузки картинок. В итоге, у Isotope будет вся нужная информация заранее. И ошибка в расчетах из-за отсутствия габаритов не будет иметь место.

Вот рабочий пример. Для пущего эффекта вообще с твоей картинкой и адаптивностью. Сжимай окно — все будет адаптироваться и пересчитываться. И это с учетом абсолютно позиционированной картинки внутри и flex-разметкой:

.grid {
  display: flex;
  flex-flow: row wrap;
}

.element-item {
  flex: 0 0;
  width: calc(20% - 10px);
  margin: 0 0 10px 0;
  position: relative;
}

.element-item:before {
  /* формирователь соотношения сторон + задает габариты, которые будет считать Isotope */
  content: "";
  padding-bottom: 141.3242%; /* процентное соотношение сторон картинок */
  display: block;
}

.element-item img {
  /* картинка на абсолюте, как видишь */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.element-item p,
.element-item h3 {
  /* скрываем тексты внутри, они для сортировки нужен только (код инициализации из их официального примера просто */
  display: none;
}

/* адаптивность */
@media (min-width: 768px) and (max-width: 1200px) {
  .element-item {
    width: calc(25% - 10px);
  }
}

@media (min-width: 400px) and (max-width: 767px) {
  .element-item {
    width: calc(33.333% - 10px);
  }
}

@media (max-width: 399px) {
  .element-item {
    width: calc(50% - 10px);
  }
}