css3列和溢出隐藏

Question

我正在尝试使用css列来制作pinterest样式布局.它正在工作,但列中的元素在顶角使用了对角线overflow: hidden.这些色带仅显示在第一列的元素上.我希望它们能够出现在每一栏的所有元素中.如果删除了overflow: hidden所有元素上出现的色带.我做了一个jsfiddle来演示:

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

这种行为似乎只发生在Mac上的chrome(49.0.2592.0 canary)上,在safari(9.0.2)上看起来没问题.

知道我可能缺少什么,或需要更改,所以这些色带显示在所有列中的所有元素？

编辑

Answer 1

我认为问题与功能区上的变换属性以及它相对定位的事实有关......但这种行为对我来说太奇怪了，无法理解。它可能与多次报告的固定位置错误有关或相似。

我想出了以下使用边框而不是溢出剪辑 div 的解决方法：

首先将变换移动到 div 并从功能区中overflow: hidden;删除。position: relative;然后你应该看到所有的丝带。

其次，从功能区中删除背景和填充并添加边框，如下所示：

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

最后，您所要做的就是定位包装纸并调整其尺寸。您也可以删除overflow: hidden;，但因为丝带上有阴影，所以我会将其保留。

这是你调整后的 jsfiddle，它似乎有效（至少对我来说）。:-)

还有一个很好的片段：

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

.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;
}