Как сохранить Chrome от переноса части элемента в другой столбец при использовании transform: scale ()? - PullRequest
Новая
       15

Как сохранить Chrome от переноса части элемента в другой столбец при использовании transform: scale ()?

1 голос
/ 09 октября 2019

Кто-нибудь знает обходной путь, который не дает Chrome разделить элемент между двумя столбцами при его расширении с помощью transform: scale ()? Или, возможно, альтернативный способ его масштабирования, который предотвращает этот сбой в Chrome?

Я пытаюсь создать фотогалерею из кирпичной кладки с уменьшенными изображениями при наведении мыши. Я использовал элементы статьи и раздела HTML5, которые прекрасно работают, за исключением Chrome, верхняя часть изображений в верхней части столбца и нижняя часть изображений в нижней части столбца обрезаются при развертывании эскиза с помощью преобразования:Функция scale () в CSS. После отладки я обнаружил, что разделы в верхней части переносятся в конец предыдущего столбца и наоборот. Очевидно, что IMG не переносится, он просто обрезается, но если он имеет фоновое изображение, он переносится.

Я пытался установить -webkit-column-break-inside, break-inside и page-break-inside, чтобы избежать. Я также попытался сначала уменьшить масштаб элемента, а затем вернуть его в «1»: hover. Я знаю, что это относительно небольшая косметическая проблема, но она чертовски меня раздражает.

HTML: 

<article>
    <section>
        <img src="https://source.unsplash.com/daily?clouds" />
    </section>
    <section>
        <img src="https://source.unsplash.com/daily?sky" />
    </section>
    <section>
        <img src="https://source.unsplash.com/daily?plant" />
    </section>
    <section>
        <img src="https://source.unsplash.com/daily?animal" />
    </section>
    <section>
        <img src="https://source.unsplash.com/daily?city" />
    </section>
    <section>
        <img src="https://source.unsplash.com/daily?people" />
    </section>
    <section>
        <img src="https://source.unsplash.com/daily" />
    </section>
    <section>
        <img src="https://source.unsplash.com/daily?coast" />
    </section>
    <section>
        <img src="https://source.unsplash.com/daily?raccoon" />
    </section>
  </article>

CSS: 

article{
  margin: 25px;
  columns:3;
  background-color: gray;
}
section{
  margin: 0px 8px 25px 8px;
  background-color: green;
  transition: all .3s ease-in-out;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}
section:hover{
  transform: scale(1.1);
}
img{
  width:100%;
}

https://codepen.io/jonathandunlap/pen/JjPgqNg

...