Css 具有列计数的奇怪行为Safari

我有一个容器，其中包含几个（如6）面。这些面是已设置样式的复选框。 我使用CSS列计数来创建三列

在所有浏览器上，它都按预期显示。但在safari中，只有第一列中的（样式化）复选框可见。 在其他列中，（已设置样式的）复选框不可见。如果我检查dom，它们是存在的，并且位于正确的位置，只是不可见

有没有人遇到过这个问题，并且知道这是如何造成的。如果删除列计数，则所有（样式化）复选框都可见

我在OSX High Sierra&Catalina上有这个问题。在OSX Mojave上，此问题不会发生：（

有关示例，请参见我的代码片段：

.container{
背景色：黑色；
颜色：黄花；
显示：块；
填充：60px；
}
.分面值{
框大小：边框框；
列数：3；
字号：18px；
列表样式：无；
保证金：5px0；
}
.分面值{
> * {
垂直对齐：中间对齐；
}    
}
.标签{
光标：指针；
显示：块；
溢出：隐藏；
空白：nowrap；
} 
.包装纸{
溢出：隐藏；
位置：相对位置；
}       
输入[type=“checkbox”]{
显示：无；
填充：0；
}
输入[type=“checkbox”]：选中+。复选框>范围{
不透明度：1；
}
.复选框{
背景色：白色；
边框：1px实心黄花；
边界半径：3px；
显示：内联块；
高度：20px；
保证金：3px12px 3px 3px；
位置：相对位置；
垂直对齐：顶部；
宽度：20px；
}
.checkbox>span{
边框：3件实心黄花；
边界权：无；
边界顶部：无；
高度：5px；
左：3px；
保证金：2倍；
不透明度：0；
位置：绝对位置；
顶部：3px；
变换：旋转（-45度）；
宽度：9px；
}
.标题{
显示：内联块；
线高：1.28；
溢出：隐藏；
文本溢出：省略号；
垂直对齐：中间对齐；
空白：nowrap；
}

过滤器1


过滤器2


过滤器3


过滤器4


过滤器5


过滤器6