CSS column-count and Chrome bug: how to avoid overflow content being cropped

Question

When column-count is used, it seems to crop any overflow content.

#columns {
  -webkit-column-count: 1;
  -webkit-column-gap: 10px;
  /*-webkit-column-fill: auto;*/
  -moz-column-count: 1;
  -moz-column-gap: 10px;
  /*-moz-column-fill: auto;*/
  column-count: 1;
  column-gap: 10px;
  /*column-fill: auto;*/
  border: 1px solid red;
  overflow: visible;
}
.pin {
  width: 100%;
  display: inline-block;
  padding: 10px;
  margin-bottom: 5px;
}

<div id="columns">

  <div class="pin">

    <a href="#">
      <span class="onsale">Sale!</span>
      <img src="#.jpg" />
    </a>
    <h3>Product 1</h3>
    </a>
  </div>

</div>

Result:

Any ideas how I can fix this?

EDIT 1:

It seems it is a bug in Chrome.

it is fine on Firefox though:

EDIT 2:

span.onsale {
    min-height: 3.236em;
    min-width: 3.236em;
    padding: .202em;
    font-size: 1em;
    font-weight: 700;
    position: absolute;
    text-align: center;
    line-height: 3.236;
    top: -.5em;
    left: -.5em;
    margin: 0;
    border-radius: 100%;
    background-color: $highlight;
    color: $highlightext;
    font-size: .857em;
    -webkit-font-smoothing: antialiased;
}

Hawkweed

Answer 1

I'm not sure how you are styling your .onsale so I styled on my own way.

If you use position:relative in .pin and then position:absolute you can achieve what you want.

UPDATE: The issue is the webkit-column-count:1 in Chrome and since having that with 1 or nothing is the same, just remove it and use another technique that will allow you to have the .onsale out of flow by using position:absolute

#columns {
 
  border: 1px solid red;
  
}
.pin {
  width: 100%;
  display: inline-block;
  padding: 10px;
  margin-bottom: 5px;
  position: relative
}
.onsale {
   min-height: 3.236em;
    min-width: 3.236em;
    padding: .202em;
    font-size: 1em;
    font-weight: 700;
    position: absolute;
    text-align: center;
    line-height: 3.236;
    top: -.5em;
    left: -.5em;
    margin: 0;
    border-radius: 100%;
    background-color: lightgreen;
    color: white;
    font-size: .857em;
    -webkit-font-smoothing: antialiased;
}

<div id="columns">
  <div class="pin">
    <a href="#">
      <span class="onsale">Sale!</span>
      <img src="//placehold.it/300x300" />
    </a>
    <h3>Product 1</h3>
  </div>
  <div class="pin">
    <a href="#">
      <span class="onsale">Sale!</span>
      <img src="//placehold.it/300x300" />
    </a>
    <h3>Product 2</h3>
  </div>
</div>

Hoes

thanks. it looks like it is working here. but it still does not work on my chrome. I edited my question above to add the code of .onsale. it is from woocommerse for wordpress. – Hawkweed

updated with your onsale code and works fone FF and Chrome – Hoes

@teelou Forgot to mention you have an extra </a> after your <h3>, could be that – Hoes

thanks for the edit. can you try to add another item of pin. .onsale does not show on the second .pin. – Hawkweed

the extra a tag is my mistake. – Hawkweed

Updated answer, take a look – Hoes

so now can you see that .onsale items are being cropped? i think it is a bug in chrome. – Hawkweed

try run your code in firefox then you see what a mean. – Hawkweed

so the solution is not to use column-count? – Hawkweed

At least is a quick fix/hack that I found, since that's the issue in Chrome. – Hoes

Answer 2

Add transform: translateZ(0); to your .pin to enable hardware acceleration as a workaround.

Starvation

Answer 3

I have a fix for this too.

This example shows the use of

transform: translateZ(0);

which fixes the cropping issue. It also shows a clever way to show the content Above the other columns blocks using z-index on hover:

https://codepen.io/HaloDesign/pen/zdRoYZ

Pubescent

Answer 4

Just use padding inside #columns class

Fardel

where did you declare products class? – Fardel