Random white-space after content (Webkit browser bug)

Question

I have been getting an unknown white-space at the bottom of my Service pages. I'm using column-count: 2; to break the images up between two columns.

Update: This is a Webkit browser problem

The problem is the extra space at the bottom of mainCont, left side column.

If the images all line up flush then there is about a 30px of unneeded white-space. Although if the images do not line up flush then there is about a 50-70px of extra white-space. I have a 10px padding on the main containers but I can't find what is creating the extra spacing.

Here is a JSFIDDLE (remove/show in url to view code) to see what the problem is. Also here is the Live Site so you can see how it affects each one of the service pages.

CSS for main container:

.mainCont {
    width: 100%;
    background: #f7f7f7;
    padding: 10px;
    position: relative;
    margin-top: 2.5%;
}

Edit

There is about 160px of extra space at the bottom minus 20px(mainCont and gridbox img equals 20px in padding).

Answer 1

I have been making research since ysterday.

1. If image sizes are equal, no problem on all browsers
2. If image sizes are different, extra space occurs at the bottom of the page.

This is the bug of chrome browser. There is something wrong with balancing algorithm. They haven't resolved this issue yet. You can see here