css3 columns and overflow hidden

Question

I am trying to use css columns to make a pinterest style layout. It's working, but the elements in the columns have a diagonal ribbon over the top corner that uses overflow: hidden. These ribbons only show up on the elements of the first column. I'd expect them to show up on all elements in every column. If you remove the overflow: hidden the ribbons appear on all elements. I've made a jsfiddle to demonstrate:

https://jsfiddle.net/6ooefvq3/5/

This behaviour only seems to occur in chrome on mac (49.0.2592.0 canary), it looks ok on safari (9.0.2).

Any idea what I may be missing, or need to change, so these ribbons show up on all elements in all columns?

EDIT

Answer 1

I think the problem has to do with the transform property on the ribbon and the fact that it is positioned relatively... but the behavior is too strange for me to make sense of. It may be related to, or be similar to the fixed position bug that has been reported many times.

---

I have come up with the following work-around using borders instead of an overflow-clipped div:

First move the transforms to the div with overflow: hidden; and remove position: relative; from the ribbon. You should then see all the ribbons.

Second remove the background and padding from the ribbon and add borders like so:

border-bottom: 6px solid red;
border-top: 6px solid transparent;
border-left: 6px solid transparent;
border-right: 6px solid transparent;

Finally all you have to do is position and size the wrapper. You could also remove overflow: hidden;, but because you have a shadow on the ribbon I would leave it in.

Here is your adjusted jsfiddle that seems to be working (at least for me). :-)

And a Snippet for good measure:

.columns {
  -webkit-column-width: 250px;
  column-width: 250px;
  width: 95%;
  height: 440px;
}

body {
background: #ccc;
}

.box {
  background: white;
  position: relative;
  width: 70px;
  height: 100px;
  margin: 10px 0;
}

.ribbon-wrapper {
  width: 32px;
  height: 12px;
  overflow: hidden; /* remove this and the ribbons appear */     
  position: absolute;
  right: -10px;
  top: 0px;
   -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
}

.ribbon {
  font: bold 15px Sans-Serif;
  font-size: 8px;
  text-align: center;
  width: 20px;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
  border-bottom: 6px solid red;
  border-top: 6px solid transparent;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

<div class="columns">
   <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
</div>

Answer 2

For posterity

/*
 __     __   __   __                ___       __   ___  __      ___  __   __     
|__) | |__) |__) /  \ |\ |    |__| |__  |    |__) |__  |__)    |__  /  \ |__)
|  \ | |__) |__) \__/ | \|    |  | |___ |___ |    |___ |  \    |    \__/ |  \
 ___  __   __       ___  ___       __      __             
|__  |__) /  \ |\ |  |  |__  |\ | |  \    |__)  /\  | |\ |
|    |  \ \__/ | \|  |  |___ | \| |__/    |    /~~\ | | \| 
*/


@mixin HELPER-ribbon($width:130px,$thickness:35px,$shadow:0,$font:10px,$font-color:#000,$color:gold) {
& {
position:absolute;
top:0;
right:0;
user-select: none;
pointer-events: none;
width:$width+(($thickness*1.41)/2*(-1)); //1.41 ~ √2
height: $width+(($thickness*1.41)/2*(-1));
overflow: hidden;
color:$font-color;

&:before { 
  @if($shadow==1){
    filter: drop-shadow(0px 0px 7px rgba(#000,0.1));
    //box-shadow:0px 0px 7px rgba(#000,0.1);
  }
  content:'';
  position: absolute;
  right:($width - ($width/1.41))*(-1);
  top: 0px; 
  margin-top:(($thickness*1.41)/2*(-1));
  margin-right:(($thickness*1.41)/2*(-1));
  transform: rotate(45deg);
  transform-origin: left top;
  display: inline-flex;
  padding-bottom:-($thickness*0.5);
  border-bottom: $thickness solid $color;
  border-left: $thickness solid transparent;
  border-right: $thickness solid transparent;
  height: 0px;
  width: $width;
  line-height:$thickness - 2px; 
}
&:after {
  content:attr(title);
  font-weight:500;
  text-transform: uppercase;
  font-size: $font;
  transform: rotate(45deg);
  transform-origin: left top;
  line-height:$thickness - 2px; 
  position: absolute;
  right:($width - ($width/1.41))*(-1);
  top: 0px; 
  margin-top:(($thickness*1.41)/2*(-1));
  margin-right:(($thickness*1.41)/2*(-1));
  width: $width;
  text-align:center;
  z-index:2;
}
}
}
.ribbon {
  width:100%; @include HELPER-ribbon($width: 150px, $thickness:20px, $shadow:1)
}

https://pp98rx64q0.codesandbox.io/