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;
}

Итого, получаем крссбраузерное решение.

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