Html 标签：在单选按钮上显示内容之前，奇怪的移动Safari行为

我用它来评价一个web应用程序。在每个桌面浏览器中，它看起来都一样

因此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>

分数：
五星
四星
三星
双星
1颗星

问题是：当我在mobile Safari上查看此网站时，星星显示加倍，中间有一点距离。如下图所示：