Страницы

Поиск по вопросам

понедельник, 26 ноября 2018 г.

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

Сделал на пробу макет, который работает как нужно в 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; } }

Tile 1
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

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!

Link
Tile 2
Tile 3
Tile 4
Tile 5
Tile 6


Ответ

Хм, кажется нашлось решение. На решение натолкнул этот вопрос/ответ тёзки: проблема с flex-wrap + bootstrap3 на safari 9
Добавил в CSS это и все заработало:
#section-tiles-home .row:after, #section-tiles-home .row:before { display: inherit; }

Комментариев нет:

Отправить комментарий