如何使用列宽+ CSS切换开关修复此Chrome渲染故障？

Question

我制作了这些不错的切换开关，但当我的<ul>列包裹时，它们会出现故障。有没有办法解决这个问题或避免这个错误？

＆＃13;

＆＃13;

.multicol-list {
  list-style: none;
  margin: 0;
  padding: 3px;
  column-width: 150px;
  column-gap: 10px;
}

.toggle-switch_switch--14qeA {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  margin: 2px 0;
}

label.checkable {
  cursor: pointer;
  white-space: nowrap;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.toggle-switch_input--68Ttu {
  position: fixed;
  width: 1px;
  height: 1px;
  left: -99999px;
  top: -99999px;
}

.toggle-switch_input--68Ttu:checked+.toggle-switch_slider--aw4YH {
  background-color: #3c8dde;
  background-image: linear-gradient(#599bdc, #3072b3);
}

.toggle-switch_slider--aw4YH {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 200ms;
  border-radius: 17px;
}

.toggle-switch_slider--aw4YH:before {
  position: absolute;
  content: "";
  height: 11px;
  width: 11px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 200ms;
  border-radius: 50%;
}

＆＃13;

<ul class="multicol-list">
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="4" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>lorem</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="8" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>ipsum</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="19" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>delor</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="18" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>aergerg234</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="1" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>earge3r</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="20" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>aergaerg Tour</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="21" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>bvervaer</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="11" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>aergaerg</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="22" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>aergaerg</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="9" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>aergaerg</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="23" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>aerger 23wag Tour</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="7" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>aerg aerg aergearg</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="24" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>vearvaer</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="25" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>aerg 342eabr Tour</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="5" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>aerg</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="6" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>rthsrth</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="26" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>srthrsth srthrsth</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="27" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>srth srth</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="28" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>srth 16</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="29" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>srthrt</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="10" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>srth</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="30" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>rhtsrth Station</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="2" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>srthrst</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="3" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>srth rsthrsth</span></label>
    </li>
    <li>
        <label class="checkable"><label class="toggle-switch_switch--14qeA"><input type="checkbox" value="31" class="toggle-switch_input--68Ttu"><span class="toggle-switch_slider--aw4YH"></span></label><span>srthrst bsrtbrhbt</span></label>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

这种情况发生在Win10上的Chrome 63.0.3239.84中。在Firefox和Edge中都不会发生。