1

I was trying to make a Pinterest type layout using only CSS3 Multi Column code, which is as follows:

#columns {
    overflow: hidden;

    -webkit-column-count: auto;
    -moz-column-count: auto;
    column-count: auto;

    -webkit-column-width: 350px;
    -moz-column-width: 350px;
    column-width: 350px;

    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;

    .article-content-block {

        display: block;

        padding: 1.5rem;
        margin-bottom: 1rem;
        box-shadow: 1.5px 1.5px 2px #e3e3e3;
        border: 1px solid $gray-lighter;
        background-color: white;
        @include transition(all .3s ease-in-out);

        &:hover {
            box-shadow: 3px 3px 6px #e3e3e3, 4px 4px 8px #e3e3e3 inset;
        }

        page-break-inside: avoid; /* For Firefox. */
        -webkit-column-break-inside: avoid; /* For Chrome & friends. */
        break-inside: avoid; /* For standard browsers like IE. :-) */

Well, in Safari, there is always an overflow coming on top of the second Column:

Safari with column code

To fix that I tried max-height, over-flow hidden etc. nothing worked. Then I used: 

.article-content-block {
    display: inline-block;

Which seemed to fixed Safari (Version 10.1.1) perfectly. But guess what, this is what Chrome (Version 59.0.3071.104) looked like:

Chrome after code change

I can fix chrome fine with :

.article-content-block {
    display: block;

But this will break Safari back to what it was. I thought they were both WebKit browsers. And I used all the necessary prefixes also, so what am I doing wrong? So far no one seemed to be having any issue like this.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Da Moose
  • 111
  • 1
  • 14
  • Do you have a fiddle/plunkr/whathaveyou? – phil Jun 20 '17 at 12:57
  • Here you go ... this is pretty close: https://jsfiddle.net/damoose/4vfce2wr/2/ – Da Moose Jun 20 '17 at 13:19
  • Seems to be working with `.article-content-block { display: inline; }`. But I don't have safari installed to test there. – phil Jun 20 '17 at 14:12
  • Yep, just tested with inline, it breaks both chrome & safari ... :-( – Da Moose Jun 21 '17 at 01:00
  • Also, I see this issue only if I have less than 5 items (posts) in the grid. More than 5 seems to work fine on a 3 column layout ... – Da Moose Jun 22 '17 at 01:08
  • I ran into the same issue. Did not come up with the solution yet – leon Oct 01 '17 at 18:39
  • I ended up writing something with Vue.js where I just detect the browser and switch classes ... one for Chrome and one for Safari ... display: block for Chrome and display: inline-block for Safari ... it's working fine for me. see here http://wpfree.devhtmlfive.com/video-page/ – Da Moose Oct 07 '17 at 08:56

0 Answers0