title: How to keep Chrome from wrapping portion of element to another column when using transform: scale()?
body: <p>Does anyone know of a workaround to stop Chrome from splitting a  element between two columns when expanding it using transform: scale()?  Or perhaps an alternate way of scaling it up that prevents this glitch in Chrome?</p>
  
  <p>I'm trying to build a masonry photo gallery, with thumbnails that expand on mouseover.  I used the HTML5 article and section elements which works great, except in Chrome, the top portion of images at the top of a column and the bottom portion of images at the bottom of a column get cut off when the thumbnail expands using the transform: scale() function in CSS.  Upon debugging, I have discovered that sections at the top wrap to the bottom of the previous column and vice versa.  Obviously the img doesn't carry over, it just gets cut off, but if the  has a background image, it does carry over.  </p>
  
  <p>I've tried setting -webkit-column-break-inside, break-inside, and page-break-inside to 'avoid'.  I've also tried scaling down the element initially, then returning it to '1' on :hover.  I know it's a relatively minor cosmetic issue but it bugs the hell out of me.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;article&gt;
      &lt;section&gt;
          &lt;img src="https://source.unsplash.com/daily?clouds" /&gt;
      &lt;/section&gt;
      &lt;section&gt;
          &lt;img src="https://source.unsplash.com/daily?sky" /&gt;
      &lt;/section&gt;
      &lt;section&gt;
          &lt;img src="https://source.unsplash.com/daily?plant" /&gt;
      &lt;/section&gt;
      &lt;section&gt;
          &lt;img src="https://source.unsplash.com/daily?animal" /&gt;
      &lt;/section&gt;
      &lt;section&gt;
          &lt;img src="https://source.unsplash.com/daily?city" /&gt;
      &lt;/section&gt;
      &lt;section&gt;
          &lt;img src="https://source.unsplash.com/daily?people" /&gt;
      &lt;/section&gt;
      &lt;section&gt;
          &lt;img src="https://source.unsplash.com/daily" /&gt;
      &lt;/section&gt;
      &lt;section&gt;
          &lt;img src="https://source.unsplash.com/daily?coast" /&gt;
      &lt;/section&gt;
      &lt;section&gt;
          &lt;img src="https://source.unsplash.com/daily?raccoon" /&gt;
      &lt;/section&gt;
    &lt;/article&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>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%;
  }
  </code></pre>
  
  <p><a href="https://codepen.io/jonathandunlap/pen/JjPgqNg" rel="nofollow noreferrer">https://codepen.io/jonathandunlap/pen/JjPgqNg</a></p>