Странное поведение Safari с подсчетом столбцов

Question

У меня есть контейнер, содержащий несколько (например, 6) аспектов. Эти фасеты представляют собой стилизованные флажки. Я использую CSS column-count для создания трех столбцов.

Во всех браузерах он отображается так, как задумано. Но в сафари видны только (стилизованные) флажки в первом столбце. В других столбцах флажки (стилизованные) не видны. Если я осмотрю дом, они присутствуют и находятся в нужном месте, просто не видны.

Кто-нибудь сталкивался с этой проблемой и знает, как это вызвано. Если я удалю счетчик столбцов, будут видны все (стилизованные) флажки.

У меня была эта проблема на OSX High Sierra & Catalina. В OSX Mojave этой проблемы не возникает :(

См. Пример в моем коде:

.container {
    background-color: black;
    color: goldenrod;
    display: block;
    padding: 60px;
}

.facet-values {
    box-sizing: border-box;
    column-count: 3;
    font-size: 18px;
    list-style: none;
    margin: 5px 0;
}

.facet-value {
    > * {
        vertical-align: middle;
    }    
}

.label {
    cursor: pointer;
    display: block;
    overflow: hidden;
    white-space: nowrap;
 } 
 
.wrapper {
    overflow: hidden;
    position: relative;
 }       
input[type="checkbox"] {
    display: none;
    padding: 0;
}


input[type="checkbox"]:checked + .checkbox > span {
  opacity: 1;
}
        
.checkbox {
    background-color: white;
    border: 1px solid goldenrod;
    border-radius: 3px;
    display: inline-block;
    height: 20px;
    margin: 3px 12px 3px 3px;
    position: relative;
    vertical-align: top;
    width: 20px;
}
            
.checkbox > span {
    border: 3px solid goldenrod;
    border-right: none;
    border-top: none;
    height: 5px;
    left: 3px;
    margin: 2px;
    opacity: 0;
    position: absolute;
    top: 3px;
    transform: rotate(-45deg);
    width: 9px;
}
        
.caption {
    display: inline-block;
    line-height: 1.28;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

<div class="container">
    <ul class="facet-values">
         <li class="facet-value">
            <label class="label">
                <div class="wrapper">
                    <input type="checkbox" />
                    <div class="checkbox">
                        <span></span>
                    </div>
                    <span class="caption">Filter 1</span>
                </div>
            </label>
        </li>
         <li class="facet-value">
            <label class="label">
                <div class="wrapper">
                    <input type="checkbox" />
                    <div class="checkbox">
                        <span></span>
                    </div>
                    <span class="caption">Filter 2</span>
                </div>
            </label>
        </li>
         <li class="facet-value">
            <label class="label">
                <div class="wrapper">
                    <input type="checkbox" />
                    <div class="checkbox">
                        <span></span>
                    </div>
                    <span class="caption">Filter 3</span>
                </div>
            </label>
        </li>
         <li class="facet-value">
            <label class="label">
                <div class="wrapper">
                    <input type="checkbox" />
                    <div class="checkbox">
                        <span></span>
                    </div>
                    <span class="caption">Filter 4</span>
                </div>
            </label>
        </li>
         <li class="facet-value">
            <label class="label">
                <div class="wrapper">
                    <input type="checkbox" />
                    <div class="checkbox">
                        <span></span>
                    </div>
                    <span class="caption">Filter 5</span>
                </div>
            </label>
        </li>
        <li class="facet-value">
            <label class="label">
                <div class="wrapper">
                    <input type="checkbox" />
                    <div class="checkbox">
                        <span></span>
                    </div>
                    <span class="caption">Filter 6</span>
                </div>
            </label>
        </li>
    </ul>
</div>