css - Webkit 入力:チェック リストの可視性

Question

このフォルダー ツリーを 1 つのサイトに置いて、CSS だけでインタラクティブにしようとしています (フォルダーの開閉など)。

私が行った方法では、Firefox では問題なく動作しますが、Webkit ベースのブラウザー (Chrome、Safari) では動作しません。デバッグしようとすると、デバッガーの表示プロパティが正しく変更されましたが、期待される効果を確認するには、表示プロパティをオフにしてから再度オンにする必要がありました。

CSS:

ul.tree
{
   text-align: left;
}

ul.tree li
{
   position: relative;  
   list-style: none;
}

li.file
{
   background: url(images/icons/default_document.png) 0 0 no-repeat;
   background-size: 1.5em 1.5em;
}

li.file a
{
   display: block;
   text-decoration: none;
}

ul.tree li input
{   
   position: absolute;
   top: 0;
   left: 0;

   cursor: pointer; 

   opacity: 0;
   z-index: 2;
}

ul.tree li input + label + ul
{   
   margin: 1em 0 1em 2em;
}

ul.tree li input + label + ul > li
{
   display: none;
}

ul.tree li label
{   
   background: url(images/icons/Closed_32x32x32.png) 0 0 no-repeat;
   background-size: 1.3em 1.3em; 

   cursor: pointer;

   display: block;
}

ul.tree li input:checked + label
{
   background-image: url(images/icons/Open_32x32x32.png);
}

ul.tree li input:checked + label + ul
{
   margin: 0 0 0 3em;
}

ul.tree li input[type=checkbox]:checked + label + ul > li.file
{
   display: list-item;

   margin: 0;
}

HTML:

<ul class="tree">
   <li>
      <input type="checkbox" id="subfolder1" /><label for="subfolder1">Some Label</label>
      <ul>
         <li class="file"><a href="path/to/file1">file1</a></li>
         <li class="file"><a href="path/to/file2">file2</a></li>
      </ul>
   </li>
</ul>

完全なサイトを表示する必要がある場合 (重要でない CSS プロパティなどは省きました)、http://perpartes.cz/novy_PPC/publikaceで入手できます。フォームに偽の電子メールを書き込むだけです。