Flexbox wrap - первый и последний элемент отображается неправильно на iPad

Question

У меня проблема с обертыванием flexbox на iPad. При эмуляции iPad в Chrome инструментах разработчика я получаю желаемый результат, все элементы отображаются и отображаются правильно. Однако, когда я тестирую использование Browserstack на физическом iPad, первый и последний элементы в гибком контейнере не ведут себя одинаково, пожалуйста, посмотрите для сравнения изображения ниже.

Dev Tools iPad Emulation

Browserstack iPad / Physcial Device

Я просматривал решения других людей здесь, но безрезультатно. Вот фрагмент SASS с решениями, которые люди предоставили по другим вопросам, добавленные, но все еще не работающие. Также добавили ссылку на указанную ниже страницу, чтобы ее было легче проверить.

Это мой Css

.blogPageCards {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  .articleCard {
      flex-direction: column;
      width: calc(50% - 30px);
      margin: 0px 15px;
        &:before {
          display: none;
          content: normal;
        }
        &:after {
          display: none;
          content: normal;
        }
    }
}

http://nevillejohnson.dev.clicky.co.uk/inspiration/

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация. Заранее спасибо.

Answer 1

Поскольку я не могу написать комментарий, я пишу его здесь. Я думаю, что он не работает, потому что вашему браузеру (я полагаю, это IOS Safari) требуется css префикс поставщика для реализации flexbox.

Я не уверен, какая IOS версия Safari используется вашим Ipad, но если он находится между 3.2 - 6.1, вы обязательно должны поставить -webkit- перед flexbox, как это

.blogPageCards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

  .articleCard {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      width: calc(50% - 30px);
      margin: 0px 15px;
        &:before {
          display: none;
          content: normal;
        }
        &:after {
          display: none;
          content: normal;
        }
    }
}