Weird behaviour Safari with Column-count

Question

I have a container that contains several (eg. 6) facets. These facets are checkboxes that are styled. I use CSS column-count to create three columns.

On all browsers it shows as intended. But in safari only the (styled) checkboxes in the first column are visible. In the other columns the (styled) checkboxes are not visible. If I inspect the dom, they are present and are in the right place, just not visible.

Has anybody encountered this issue and know how this is caused. If I remove the column-count all the (styled) checkboxes are visible.

I had this issue on OSX High Sierra & Catalina. On OSX Mojave this problem does not occur :(

See my codesnippet for an example:

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