CSS свойство column-count не корректно работает в Vivaldi и других браузерах на хромиуме
Свойство column-count не корректно работает в Vivaldi и других браузерах на хромиуме. В фаерфоксе все нормально.
Пример:
.card-columns{-webkit-column-count:5;-moz-column-count:5;column-count:5;-webkit-column-gap:1.25rem;-moz-column-gap:1.25rem;column-gap:1.25rem;-webkit-perspective:1;}
.card-columns .card{display:inline-block;width:100%;}
В хромоподобных:
В фаерфоксе:
Как пофиксить?
Добавляем к .card-columns .card
-webkit-column-break-inside: avoid;
-webkit-backface-visibility: hidden;
/* This is not strictly needed, but it could help for more complex layouts and in case you have multiple columns */
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;
page-break-inside: avoid;
и меняем
display:inline-block;
на
display:block;
должно получиться:
.card-columns{-webkit-column-count:5;-moz-column-count:5;column-count:5;-webkit-column-gap:1.25rem;-moz-column-gap:1.25rem;column-gap:1.25rem;-webkit-perspective:1;}
.card-columns .card{
display:block;
width:100%;
-webkit-column-break-inside: avoid;
-webkit-backface-visibility: hidden;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;
page-break-inside: avoid;
}
Итого, получаем крссбраузерное решение.

29.04.2018
1 ответ
авторизуйтесь чтобы ответить