Сделал на пробу макет, который работает как нужно в 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;
}
}
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Ответ
Хм, кажется нашлось решение. На решение натолкнул этот вопрос/ответ тёзки:
проблема с flex-wrap + bootstrap3 на safari 9
Добавил в CSS это и все заработало:
#section-tiles-home .row:after,
#section-tiles-home .row:before {
display: inherit;
}
Комментариев нет:
Отправить комментарий