收音機選擇時的頁面位置重置

Question

爲什麼在此jsfiddle中進行選擇時會重置頁面位置，以及如何阻止它？

https://jsfiddle.net/zexvtoz1/21/

HTML：發生了什麼事的

<fieldset class="rating one"> 
    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!"><span>&#9733</span></label> 
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good"><span>&#9733</span></label> 
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh"><span>&#9733</span></label> 
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad"><span>&#9733</span></label> 
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time"><span>&#9733</span></label> 
</fieldset> 

馬鈴薯品質的GIF：

http://i.imgur.com/uEvn58U.gif

編輯：新的jsfiddle鏈接

Answer 1

我想出瞭如何解決這個問題，但並沒有解釋爲什麼會發生這種情況（儘管我可以猜測它試圖用單選按鈕「在視圖內」定位）。

我改變了下面的代碼

.rating:not(:checked) > input { 
    position:absolute; 
    top:-9999px; 
    clip:rect(0,0,0,0); 
} 

到

.rating:not(:checked) > input { 
    position:absolute; 
    visibility: hidden; 
    clip:rect(0,0,0,0); 
} 

撥弄修復https://jsfiddle.net/t4t0dxqz/

Finally found a thread that clued me in