Safari 12.0.3で:checkedを使ったCSSセレクタの挙動

Safari 12.0.3で「input:checked + .text .ico:before」でチェックをつけようとした場合、うまくCSSのスタイルが適用されません。
自分が確認した時は、一番目以外はCSSが適用されませんでした。
原因わかる方いましたら教えていただきたいです。

label {
    position: relative;
    display: block;
}

.ico {
    position: absolute;
    top: 0;
    left: 0;
    padding-bottom: 4.5%;
    display: block;
    width: 5%;
    height: 0;
    background: #fff;
    border: 1px solid #000;
}

.ico:before {
    content: '';
    position: absolute;
    bottom: 25%;
    right: 50%;
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: bottom right;
    transform: scale(0, 0) rotate(45deg);
    transition: .1s;
    border-bottom: 3px solid #e13d80;
    border-right: 3px solid #e13d80;
}

input:checked + .text .ico:before {
    content: '';
    transform: scale(1, 1) rotate(45deg);
    width: 60%;
    height: 100%;
}

<label>
  <input type="checkbox">
  <span class="text">
    <span class="ico"></span>
    　チェック1
  </span>
</label>
<label>
  <input type="checkbox">
  <span class="text">
    <span class="ico"></span>
    　チェック2
  </span>
</label>
<label>
  <input type="checkbox">
  <span class="text">
    <span class="ico"></span>
    　チェック3
  </span>
</label>

ちなみに、「input:checked + .text .ico:before」の前に「input:checked + .text」に対してスタイルをつけるとうまく動作するのですが、こちらも原因がわかりません。。。

label {
    position: relative;
    display: block;
}

.ico {
    position: absolute;
    top: 0;
    left: 0;
    padding-bottom: 4.5%;
    display: block;
    width: 5%;
    height: 0;
    background: #fff;
    border: 1px solid #000;
}

.ico:before {
    content: '';
    position: absolute;
    bottom: 25%;
    right: 50%;
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: bottom right;
    transform: scale(0, 0) rotate(45deg);
    transition: .1s;
    border-bottom: 3px solid #e13d80;
    border-right: 3px solid #e13d80;
}

/* input:checked + .textにスタイルを指定するとうまく動く */
input:checked + .text {
    color: #999;
}

input:checked + .text .ico:before {
    content: '';
    transform: scale(1, 1) rotate(45deg);
    width: 60%;
    height: 100%;
}

<label>
  <input type="checkbox">
  <span class="text">
    <span class="ico"></span>
    　チェック1
  </span>
</label>
<label>
  <input type="checkbox">
  <span class="text">
    <span class="ico"></span>
    　チェック2
  </span>
</label>
<label>
  <input type="checkbox">
  <span class="text">
    <span class="ico"></span>
    　チェック3
  </span>
</label>