Chromeレンダリングの非表示ラベル

Question

Chromeで1つのラベルがランダムに非表示になる以外は、意図したとおりに動作するCSSを使用してタブシステムを作成しました。

私はこの問題を表現するために、小さな例を作成しました：http://jsbin.com/xexupiciru/edit?html,css,output

これは、単一のタブを表し、関連するコードの抜粋です：SafariとFirefoxので

<div> 
    <input name="tagmanage-tabbed" id="tagmanage-tabbed2" type="radio"> 
    <section> 
    <h1> 
     <label for="tagmanage-tabbed2">{{ tabTitle }}</label> 
    </h1> 
    <div> 
     <p>Some content</p> 
    </div> 
    </section> 
</div> 

意図したとおり、この作品しかし、Chromeでは、ラベルをクリックすると何らかの理由で別のラベルが表示されなくなり、その理由がわかりません。

Answer 1

Google Chromeで非表示になっているのは、要素をクリックすると少し大きめになるため、目に見えないオーバーフローが発生するからです。 Google Chromeは次のルールを見て、それを隠す：

.tagmanage-tabbed > div > section > h1 { 
    overflow: hidden; 
} 

私はこの行を削除すると、それはもはや隠されていませんでした。