Bootstrap卡列：Safari奇怪地显示卡片＆＃39;箱阴影

Question

我使用卡片列设置了Bootstrap 4卡：

<div class="card-columns">
    <div class="card">
        ...
    </div>

    <div class="card">
        ...
    </div>

    <div class="card">
        ...
    </div>
</div>

我在这些卡片上应用了盒子阴影：

@media (min-width: 576px) {
    .card-columns {
        column-count: 1;
    }
}

@media (min-width: 768px) {
    .card-columns {
        column-count: 2;
    }
}

@media (min-width: 992px) {
    .card-columns {
        column-count: 3;
    }
}

@media (min-width: 1200px) {
    .card-columns {
        column-count: 3;
    }
}

div.card-columns {
    overflow: visible;
}

div.card {
    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16), 0 3px 6px 0 rgba(0,0,0,0.23);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    border: none !important;
    border-radius: 0 !important;
}

div.card:hover {
    box-shadow: 0 14px 28px 0 rgba(0,0,0,0.25), 0 10px 10px 0 rgba(0,0,0,0.22);
}

以下是Firefox如何显示它们： card-columns in Firefox

以下是Safari显示它们的方式： card-columns in Safari

使用卡片组而不是卡片列时，Safari会正确显示卡片。

我知道应该从哪里开始看？

谢谢！