Images not loading in chrome

For a small project I am doing, I am creating a masonry style picture board using css3 column count. This works perfectly and creates the 4 columns I want to use.

My problem is is that the images that populate the cards only render in the 1st column. In the rest, they are their, and if i click and drag or right click it provides the image url/the thumbnail. In firefox and internet explorer this renders correctly and images show in every column, just not on chrome.

The html for my pictures is as below:

<div class="col s12 masonry">
    <div class="masonryItem card" ng-repeat="photo in RecentPhotos">

        <div class="card-image">
            <img ng-src="Assets/images/Photos/{{photo.fileName}}">
            <span class="card-title" ng-hide="photo.editing">{{photo.name}}</span>
            <input class="card-title" title="Title" type="text" ng-model="photo.name" ng-show="photo.editing" ng-blur="updatePhoto(photo)" autofocus/>
        </div>
        <div class="card-content">
            <p ng-hide="photo.editing">
                {{photo.description}}
            </p>
            <input title="Description" type="text" ng-model="photo.description" ng-show="photo.editing" ng-blur="updatePhoto(photo)" autofocus/>
        </div>
        <div class="card-action">
            <a href="" ng-click="editPhoto(photo)">Edit</a>
        </div>

    </div>
</div>

The css for the masonry classes is as below:

.masonry {
 /* Masonry container */
    column-count: 4;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-gap: 1em;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-fill: auto;
    -moz-column-fill: auto;
    -webkit-column-fill: auto;
}

.masonryItem {
 /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

Unfortunately i cannot upload a screenshot on here, so cannot show you my actual site however this JSfiddle

Demonstrates the problem. although images aren't actually on there, you can see that the first column has the 'broken image' link but the rest do not despite having images linked in them.

Answers


Try removing overflow: hidden from .card class

.card {
    position: relative;
    /* overflow: hidden; */
    margin: 0.5rem 0 1rem 0;
    background-color: #fff;
    transition: box-shadow .25s;
    border-radius: 2px; 
}

Need Your Help

Elastic Search 2.0/2.1 Issue with Highlighter and the Bool Query

elasticsearch highlight booleanquery

I am having an issue with highlighting in Elastic 2.0 and 2.1 - it's returning more information than I think it should.