标签：之前用单选按钮上的内容，怪异的移动Safari行为

Question

我正在使用此Codepen来评估网络应用程序。在每个桌面浏览器中，它看起来都是一样的。

所以CSS看起来像这样：

body {
  padding: 1em;
}

input {
  position:absolute;
  top: -2em;
  clip:rect(0,0,0,0);
}

.score {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
  border: 0;
  font-size: 0;
}
.score legend {
  overflow: hidden;
  height: 0;
}
.score label {
  font-size: 80px; font-size: 9rem;
  line-height: 80px; line-height: 9rem;
  display: inline-block;
  position: relative;
  text-align: center;
  width: 1.2em;
  height: 1em;
  overflow: hidden;
  text-indent: 100%;
}
.score label:before {
   content: "☆";
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   text-indent: 0;
   line-height: 1em;
   color: #aaa;
}
.score label:hover:before,
.score label:hover ~ label:before,
.score input:checked ~ label:before {
   content: "★";
   color: #ffbb04;
}
.score label:active {
  position: relative;
  top: 1px;
}

HTML：

<fieldset class="score">
  <legend>Score:</legend>

  <input type="radio" id="score-5" name="score" value="5"/>
  <label title="5 stars" for="score-5">5 stars</label>

  <input type="radio" id="score-4" name="score" value="4"/>
  <label title="4 stars" for="score-4">4 stars</label>

  <input type="radio" id="score-3" name="score" value="3"/>
  <label title="3 stars" for="score-3">3 stars</label>

  <input type="radio" id="score-2" name="score" value="2"/>
  <label title="2 stars" for="score-2">2 stars</label>

  <input type="radio" id="score-1" name="score" value="1"/>
  <label title="1 stars" for="score-1">1 stars</label>

</fieldset>

问题：当我在移动版Safari上查看此网站时，星星显示加倍，两者之间有一点距离。喜欢这个截图：