列计数问题Chrome

Question

我在Chrome中遇到一个奇怪的列计数问题，似乎找不到导致它的原因。

我通过媒体查询将列缩减为1。当我这样做时，Chrome会将最后一张图像投入第二列。它在firefox中看起来很好。

铬：

火狐：

如果我采取溢出-x：隐藏;在身体标签上我可以看到Chrome已将第二列中的最后一个图像抛向右侧。

HTML -

<div class="imageWrapper">

 <div class='roundSpacer'><div class='roundImg'><a href='gallery.php?gallery=Fauna Gallery'><img alt='Fauna Gallery' src='img/portfolio/Fauna Gallery.jpg'/><h2>Fauna Gallery</h2></a></div></div>

 <div class='roundSpacer'><div class='roundImg'><a href='gallery.php?gallery=Flora Gallery'><img alt='Flora Gallery' src='img/portfolio/Flora Gallery.jpg'/><h2>Flora Gallery</h2></a></div></div>

 <div class='roundSpacer'><div class='roundImg'><a href='gallery.php?gallery=Landscape Gallery'><img alt='Landscape Gallery' src='img/portfolio/Landscape Gallery.jpg'/><h2>Landscape Gallery</h2></a></div></div>

 <div class='roundSpacer'><div class='roundImg'><a href='gallery.php?gallery=Murals'><img alt='Murals' src='img/portfolio/Murals.jpg'/><h2>Murals</h2></a></div></div>

 <div class='roundSpacer'><div class='roundImg'><a href='gallery.php?gallery=Portrait Gallery'><img alt='Portrait Gallery' src='img/portfolio/Portrait Gallery.jpg'/><h2>Portrait Gallery</h2></a></div></div>

 <div class='roundSpacer'><div class='roundImg'><a href='gallery.php?gallery=Western Gallery'><img alt='Western Gallery' src='img/portfolio/Western Gallery.jpg'/><h2>Western Gallery</h2></a></div></div>          

</div>

CSS -

.roundImg 
{
position: relative;
border-radius: 50%;
overflow: hidden;
width: 400px;
height: 400px;
border-style: solid;
border-width: 5px;
border-color: rgb(51,51,102);
text-align: center;
margin: 0 auto;
box-sizing: border-box;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
transform: translateZ(0);
}

.imageWrapper
{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 1em; /* Chrome, Safari, Opera */
-moz-column-gap: 1em; /* Firefox */
column-gap: 1em;
max-width: 960px;
margin: 0 auto;
padding-top: 2%;
padding-bottom: 2%;
}

.roundSpacer
{
padding: 2%;
overflow: hidden;
}


.roundImg h2
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
background: rgba(0,0,0,.6);
width: 100%;
padding: 1em;
}

.roundImg:hover
{
border-width: 10px;
}

.roundImg img 
{
/* Stretch height: 100%; width: 100%; */
min-width: 100%;
min-height: 100%;
}

@media (max-width: 750px){

.imageWrapper
{
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}

}