google-chrome - クロムでページをロード/リロードするときのボーダー不透明度遷移の失敗

Question

この問題について Web と stackoverflow を検索しましたが、問題の解決策が見つからないようでした。リスト項目にカーソルを合わせると、不透明度が 0 ～ 100% の下枠が表示されるようにしています。しかし、ページをロード/リロードすると、リスト項目の下に境界線が表示され、すぐに削除されます。ここに私が何を意味するかを説明するためのいくつかの画像があります:

1) ページの読み込み/再読み込み (境界線を表示)

2) 境界線が消えます (実際にはこのように始まるはずです!)

3) ホバリング時（トランジション完了後）

4)これは私が現在取り組んでいるウェブサイトへのリンクです。Chrome バージョン: 22.0.1229.94

ここで私が使用するhtmlとcss：

A) HTML

        <ul id="menu">
            <li><a href="index.html#">home</a></li>
            <li><a href="index.html#">contact</a></li>
            <li><a href="index.html#">find me</a></li>
            <li><a href="index.html#">downloads</a></li>
        </ul>

B) CSS

#menu li+li:before
{
    content: '//';
    color:#e27c18;
    font-size:1.2em;
    margin-right:10px;
}

#menu li a
{
    border-bottom:1px solid rgba(226, 124, 24, 0);
    -webkit-transition:border-bottom-color 300ms ease-in 200ms;
    -moz-transition:border-bottom-color 300ms ease-in 200ms;
    -o-transition:border-bottom-color 300ms ease-in 200ms;
    transition:border-bottom-color 300ms ease-in 200ms;
}
#menu li a:hover
{
    border-bottom:1px solid #e27c18;
    border-bottom:1px solid rgba(226, 124, 24, 1);
    -webkit-transition:border-bottom 300ms ease-in 200ms;
    -moz-transition:border-bottom 300ms ease-in 200ms;
    -o-transition:border-bottom 300ms ease-in 200ms;
    transition:border-bottom 300ms ease-in 200ms;
}

ここで私が望むのは、ページをリロードまたはロードするときに、正しいトランジションを持つ目に見える境界線がないことです (これが、トランジションが正しく反応する唯一の方法です)。

編集：この問題を抱えている人はごくわずかであることに気付きました。これにより、このバグを修正するのが非常に難しくなります:/。