Flex макет работает некорректно в Сафари

310

20 августа 2018, 05:50

Сделал на пробу макет, который работает как нужно в IE, FireFox и Chrome под Windows, даже под IE11.

Но рано обрадовался. В Safari под Mac и на iPad'е не работает промежуточный вариант с двумя колонками (ширина между 768 и 1199).

Я только начал знакомство с flex и пока вообще не представляю, в чем может быть проблема. Доступ к Mac'у у меня тоже пока ограничен, чтобы поиграться с вариантами.

Буду признателен, если кто-то сможет помочь.

#section-tiles-home { 
  margin: 15px; 
} 
 
#section-tiles-home .row { 
  margin: 0; 
} 
 
#section-tiles-home [class^="col-"] { 
  padding: 0; 
} 
 
#section-tiles-home .tile-img { 
  margin: 0 0 15px; 
} 
 
.tiles-col-1, 
.tiles-col-2 { 
  display: flex; 
} 
 
.tiles-col-2, 
.tiles-col-3 { 
  flex-direction: column; 
} 
 
.tiles-col-1>.tile-img { 
  flex-grow: 1; 
} 
 
.tiles-col-2 .tile-img:nth-child(1) { 
  flex-grow: 2; 
} 
 
.tiles-col-2 .tile-img:nth-child(2) { 
  flex-grow: 3; 
} 
 
.tiles-col-3>.row { 
  flex-grow: 1; 
} 
 
.tiles-col-3 .tile-img { 
  height: 65vw; 
} 
 
.tile-img { 
  background-position: center center; 
  background-repeat: no-repeat; 
  background-size: cover; 
  display: flex; 
} 
 
.tile-img-text-container { 
  align-self: stretch; 
  color: #fff; 
  display: flex; 
  flex-grow: 1; 
  flex-direction: column; 
  justify-content: flex-end; 
  overflow: hidden; 
  padding: 15px; 
  transition: all .3s ease-in-out; 
} 
 
.tile-img-text-container a { 
  text-decoration: none; 
} 
 
.tile-img-text-container a:hover { 
  text-decoration: underline; 
} 
 
.tile-img-text-container .h3 { 
  font-size: 20px; 
  margin: 0; 
  transition: all .3s ease; 
} 
 
.tile-img-text-container .tile-img-text { 
  display: none; 
  font-weight: bold; 
  text-shadow: 0 1px 0 #000; 
} 
 
.tile-img-text-container:hover { 
  background: rgba(0, 0, 0, 0.5); 
} 
 
.tile-img-text-container:hover .h3 { 
  transform: translateY(-20px); 
} 
 
.tile-img-text-container:hover .tile-img-text { 
  animation: slideInUp .3s ease; 
  display: block; 
} 
 
@media (max-width: 767px) { 
  .tiles-col-1 .tile-img { 
    height: 100vw; 
  } 
  .tiles-col-2 .tile-img:nth-child(1) { 
    height: 84vw; 
  } 
  .tiles-col-2 .tile-img:nth-child(2) { 
    height: 105vw; 
  } 
} 
 
@media (min-width: 768px) { 
  #section-tiles-home { 
    margin: 7px; 
  } 
  #section-tiles-home>.row { 
    display: flex; 
  } 
  #section-tiles-home .tile-img { 
    margin: 7px; 
  } 
  .tiles-col-2 .tile-img { 
    flex-basis: 0; 
  } 
  .tiles-col-3 .tile-img { 
    height: 21vw; 
  } 
} 
 
@media (min-width: 768px) and (max-width: 1199px) { 
  #section-tiles-home>.row { 
    flex-flow: wrap; 
  } 
  .tiles-col-1 .tile-img { 
    height: 66vw; 
  } 
} 
 
@media (min-width: 992px) { 
  .tile-img-text-container .h3 { 
    font-size: 24px; 
  } 
  .tile-img-text-container .tile-img-text { 
    font-size: 18px; 
  } 
} 
 
@media (min-width: 1200px) { 
  .tiles-col-3 .tile-img { 
    height: 16vw; 
  } 
  .tile-img-text-container .h3 { 
    text-transform: uppercase; 
  } 
} 
 
@media (min-width: 1600px) { 
  .tile-img-text-container .h3 { 
    font-size: 30px; 
  } 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="utf-8"> 
  <title></title> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" integrity="sha256-j+P6EZJVrbXgwSR5Mx+eCS6FvP9Wq27MBRC/ogVriY0=" crossorigin="anonymous"> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> 
</head> 
 
<body> 
 
  <section id="section-tiles-home"> 
    <div class="row"> 
      <div class="col-lg-6 col-sm-8 tiles-col-1"> 
        <div class="tile-img" style="background-image:url('https://picsum.photos/944/800?image=1063')"> 
          <div class="tile-img-text-container"> 
            <div class="h3">Tile 1</div> 
            <div class="tile-img-text"> 
              <div class="media"> 
                <div class="media-left"> 
                  <a href="#"> 
                    <img class="media-object" src="https://picsum.photos/70/70?image=1074" alt=""> 
                  </a> 
                </div> 
                <div class="media-body"> 
                  Lorem ipsum dolor sit amet 
                </div> 
              </div> 
              <div class="media"> 
                <div class="media-left"> 
                  <a href="#"> 
                    <img class="media-object" src="https://picsum.photos/70/70?image=1074" alt=""> 
                  </a> 
                </div> 
                <div class="media-body"> 
                  Lorem ipsum dolor sit amet 
                </div> 
              </div> 
              <p> 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci distinctio ducimus ipsa modi neque quia quod rerum vel! Culpa nihil nisi numquam perspiciatis quam quod reiciendis repellat saepe? Pariatur! 
              </p> 
              <a href="#">Link</a> 
            </div> 
          </div> 
        </div> 
      </div> 
      <div class="col-lg-3 col-sm-4 tiles-col-2"> 
        <div class="tile-img" style="background-image:url('https://picsum.photos/466/314?image=1041')"> 
          <div class="tile-img-text-container"> 
            <div class="h3">Tile 2</div> 
            <div class="tile-img-text"> 
              <a href="#">Link</a> 
            </div> 
          </div> 
        </div> 
        <div class="tile-img" style="background-image:url('https://picsum.photos/469/477?image=1044')"> 
          <div class="tile-img-text-container"> 
            <div class="h3">Tile 3</div> 
            <div class="tile-img-text"> 
              <a href="#">Link</a> 
            </div> 
          </div> 
        </div> 
      </div> 
      <div class="col-lg-3 col-sm-12 tiles-col-3"> 
        <div class="row"> 
          <div class="col-lg-12 col-sm-4"> 
            <div class="tile-img" style="background-image:url('https://picsum.photos/466/480?image=1067')"> 
              <div class="tile-img-text-container"> 
                <div class="h3">Tile 4</div> 
                <div class="tile-img-text"> 
                  <a href="#">Link</a> 
                </div> 
              </div> 
            </div> 
          </div> 
          <div class="col-lg-12 col-sm-4"> 
            <div class="tile-img" style="background-image:url('https://picsum.photos/469/317?image=1061')"> 
              <div class="tile-img-text-container"> 
                <div class="h3">Tile 5</div> 
                <div class="tile-img-text"> 
                  <a href="#">Link</a> 
                </div> 
              </div> 
            </div> 
          </div> 
          <div class="col-lg-12 col-sm-4"> 
            <div class="tile-img" style="background-image:url('https://picsum.photos/469/477?image=1057')"> 
              <div class="tile-img-text-container"> 
                <div class="h3">Tile 6</div> 
                <div class="tile-img-text"> 
                  <a href="#">Link</a> 
                </div> 
              </div> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </section> 
</body> 
 
</html>

Answer 1

Хм, кажется нашлось решение. На решение натолкнул этот вопрос/ответ тёзки: проблема с flex-wrap + bootstrap3 на safari 9

Добавил в CSS это и все заработало:

#section-tiles-home .row:after,
#section-tiles-home .row:before {
    display: inherit;
}

Создание сайта для юридической фирмы в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как сделать что бы контент не смещался

Фильмы не встают друг под друга а если это сделать то слетает поисковая строка и все что за ней вот кодыHtml и css

343

HTML

Вызов почтового клиента из браузера

Есть одностраничный сайтПроблема в том что по клику на mail должен открыться почтовый клиент, но этого не происходит

184

HTML

Не происходит переход на страницу Python/Django

Здравствуйте стараюсь написать простое приложение используя Django REST но сталкнулся со следующей проблемой

272

HTML

Как закрепить footer внизу страницы? [дубликат]

На данный вопрос уже ответили:

247