Нарушение элементов перекоса в конфигурации количества столбцов на хроме

Учитывая контейнер с 3 столбцами, использующий свойство css column-count, и каждый столбец перекошен с помощью transform: skewX(-15deg), если я применяю другую операцию перекоса внутри столбцов, начиная со 2-го столбца, затронутые элементы становятся невидимыми.

Я сделал небольшой пример, иллюстрирующий проблему: https://jsfiddle.net/yvkeax2s/4/

.outer {
  background-color: #aaffaa;
  margin: 50px;
  height: 200px;
  width: 510px;
  column-count: 3;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count-gap: 20px;
  -mozcolumn-count-gap: 20px;
  -webkitcolumn-count-gap: 20px;
}

.inner {
  display: inline-block;
  width: 150px;
  transform: skewX(-15deg);
  background-color: #ff9999;
  height: 100%;
}

.unskewed {
  transform: skewX(15deg);
}

<div class="outer">
  <div class="inner">
    <div class="unskewed">skewed 1 <img src="http://placehold.it/40x20"></div>
    raw text 1 <img src="http://placehold.it/40x20">
  </div>
  <div class="inner">
    <div class="unskewed">skewed 2 <img src="http://placehold.it/40x20"></div>
    raw text 2 <img src="http://placehold.it/40x20">
  </div>
  <div class="inner">
    <div class="unskewed">skewed 3 <img src="http://placehold.it/40x20"></div>
    raw text 3 <img src="http://placehold.it/40x20">
  </div>
</div>

В Google Chrome (версия 51.0.2704.103 m) я получаю следующее:

Результат Chrome 51.0

В Firefox (47.0) я получаю правильный ожидаемый результат:

Результат Firefox 47.0

(Усечение перекошенных блоков кажется еще одной проблемой, которая в настоящее время меня не волнует, но все же может быть заслуживающей внимания)

Кажется, это ошибка в Chrome с column-count, но есть ли обходной путь, чтобы заставить это работать?

РЕДАКТИРОВАТЬ: я тестировал это на канареечной версии 53.0.2780.0, и это сработало, поэтому ошибка, похоже, уже исправлена ​​​​на будущее.


google-chrome css css-transforms skew column-count
person Felk    schedule 26.06.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете заставить его отображаться, изменив класс .text на следующее:

.text {
  transform: skewX(15deg) translateZ(0);
}

Но нужно ли вам использовать свойство столбца? В настоящее время он является экспериментальным, содержит множество ошибок и требует большого количества префиксов браузера, см. Можно ли использовать.

То, что вы делаете, может быть достигнуто различными способами без использования свойства столбца. Я изменил вашу скрипку, чтобы она работала без нее: https://jsfiddle.net/yvkeax2s/6/

.outer {
  background-color: #aaffaa;
  margin: 50px;
  height: 200px;
  width: 510px;
}

.inner {
  float: left;
  width: 150px;
  transform: skewX(-15deg);
  background-color: #ff9999;
  height: 100%;
  margin: 0 10px;
}

.text {
  transform: skewX(15deg);
}
person Steveeeie    schedule 26.06.2016
comment
У меня та же проблема с повернутым содержимым (а не с перекосом) внутри столбцов, добавление translateZ(0) к преобразованию, похоже, также исправляет это в моем случае. - person Rasmus Kaj; 30.05.2017