jquery - Bootstrap 3.0 水平方向に折りたたむ - Chrome でバウンスする

Question

ここ ( https://stackoverflow.com/a/18602739/2966090 )の指示に従って、Bootstrap 3.0.2 で要素を水平方向に折りたたみます。

この方法は Firefox と Internet Explorer では正常に機能しますが、 Chrome では奇妙なバウンスが発生します。Chrome にもhideの遷移はありません。

ここで動作するテストを作成しました: http://jsfiddle.net/eT8KH/1/

関連するコードは次のとおりです（jsfiddleでも）：

CSS

#demo.width {
    height: auto;
    -webkit-transition: width 0.35s ease;
    -moz-transition: width 0.35s ease;
    -o-transition: width 0.35s ease;
    transition: width 0.35s ease;
}

HTML

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
    Horizontal Collapsible
</button>

<div id="container" style="width:200px;">
    <div id="demo" class="collapse in width" style="background-color:yellow;">
        <div style="padding: 20px; overflow:hidden; width:200px;">
            Here is my content
        </div>
    </div>
</div>

これを修正する方法はありますか？それともChromeのバグですか？