Ошибка макета Masonry в Safari при использовании сайта Wordpress

Я в тупике. Я использую Masonry на своем сайте Wordpress, и он отлично выглядит во всех основных браузерах, кроме Safari.

Вот ссылка на статью, например:

статья об Apple Watch на сайте wordpress

В Safari все элементы div сжаты, и я понятия не имею, почему.

  • Я отключил все плагины, ничего не изменилось
  • Я пробовал использовать position:absolute; внутри элемента div, но тогда блоки перекрывались
  • Я пробовал выравнивание по вертикали: сверху; внутри элемента div, без разницы

Любая помощь будет оценена. Действительно тупик на этом ... СПАСИБО!


javascript wordpress safari masonry
person RollingStone1234    schedule 04.06.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Как уже упоминалось @dcardoso, ваш класс элемента со стилем обратной видимости вызывает проблему. Кажется, что добавление преобразования заставляет сафари правильно отображать элемент.

-webkit-transform: translate3d(0,0,0);
person TheAntonioReyes    schedule 04.06.2015

arrow_upward
1
arrow_downward

Этот стиль: -webkit-backface-visibility: hidden; в вашем классе .item вызывает проблему в сафари.

person Daniel Cardoso    schedule 04.06.2015
comment
Спасибо @dcardoso. Это помогло, но некоторые записи в верхнем чарте не отображались должным образом. Добавив -webkit-transform: translate3d(0,0,0); код, упомянутый ниже, работал нормально. - person RollingStone1234; 05.06.2015