Swiper переполняет сетку с помощью Edge и Safari - PullRequest
Новая
       39

Swiper переполняет сетку с помощью Edge и Safari

1 голос
/ 06 ноября 2019

Эта Swiper Fiddle работает с Firefox и Chrome. Видимо, моя сетка разбивает это с Edge и Safari (без display: grid эта скрипка будет работать с Safari и Edge). Однако я не хочу заменять сетку на flexbox.

Как мне заставить это работать в Edge и Safari при использовании display: grid? 

var swiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
body {
  background: grey;
}
.grid {
  display: grid;
  grid-template-columns: 8fr 4fr;
  grid-gap: 2rem;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  min-height: 80px;
  text-align: center;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>



</head>

  <body>
    <!-- Swiper -->
    <div class="grid">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
      <aside>
        <div>
          <p>
            Vivamus placerat lacus vel vehicula scelerisque, dui enim adipiscing lacus sit amet sagittis, libero enim vitae mi. In neque magna posuere, euismod ac tincidunt tempor est. Ut suscipit nisi eu purus. Proin ut pede mauris eget ipsum. Integer vel quam nunc commodo consequat. Integer ac eros eu tellus dignissim viverra. Maecenas erat aliquam erat volutpat. Ut venenatis ipsum quis turpis. Integer cursus scelerisque lorem. Sed nec mauris id quam blandit consequat. Cras nibh mi hendrerit vitae, dapibus et aliquam et magna. Nulla vitae elit. Mauris consectetuer odio vitae augue.
          </p>
        </div>
      </aside>
    </div>
  </body>
</html>

1 Ответ

3 голосов
/ 06 ноября 2019

Похоже, это проблема при использовании гибкой единицы (fr), и Safari неправильно вычисляет ширину. Обходной путь для этой проблемы должен определить столбцы сетки с minmax(), например grid-template-columns: minmax(0, 8fr) 4fr;

...