label:before with content on radio button, weird mobile Safari behaviour - html

Question

I am using this Codepen to rate a web application. In every Desktop browser it looks the same.
So the CSS looks like this:
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;
}
The 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>
The problem: When i view this site on mobile Safari, the stars are displayed doubled, with a bit distance in between. Like this Screenshot: