jquery - jQueryslideDownは幅を1px変更します

Question

私はすでに数日を過ごしました、私はもう考えがありません、私の問題を解決する方法。スクリーンショットで表示します：

これは、マウスが要素上にない場合は上部と下部のみが表示され、マウスオーバーすると中央の要素が下にスライドするという考え方です。ご覧のとおり、最初の画像の中央部分（facebookとgoogle +のアイコン）では、その背景が繰り返されるパターンであり、右の画像よりも1px薄くなっています。異なる画面解像度でキャプチャされた同じ要素。私たちのコンテンツは画面解像度に合わせて拡大縮小します。すべての画像の幅は同じですが、見た目が異なるのは不思議です。

cssコード：

.ribbon .vintage .nolog {
width: 92px;
}

.ribbon .vintage .nolog .top {
width: 92px;
height: 59px;
background: url("/img/ribbon/vintage/n/vintage_nolog_top.png");
}
.ribbon .vintage .nolog .center {
width: 92px;
display: none;
background: url("/img/ribbon/vintage/n/vintage_nolog_repeat.png") repeat-y;
}
.ribbon .vintage .nolog .bottom {
width: 92px;
height: 69px;   
background: url("/img/ribbon/vintage/n/vintage_nolog_bottom.png");
}

html私はjqueryを介して生成しています：

(....).append($('<div/>', {'class': 'vintage'}).hover(slideDown, slideUp).(....)
//and here those animating functions
    var slideUp = function() {
        $(this).find('.center').stop(true, false).slideUp(options.duration);
    }
    var slideDown = function() {
        $(this).find('.center').stop(true, true).slideDown(options.duration);
    }

コードは非常に単純です..ああ、このエラーはChromeでのみ表示されます：x

jsfiddle：http ://jsfiddle.net/QbX9f/ マウスオーバーの不具合がいくつかありますが、実際のアプリケーションではありません。また、結果は予想どおりです。ここではグリッチは表示されません。これは、すべての要素に適用されるcss3 scale（）が原因です。しかし、最も奇妙なことは、クロムのみです。

更新：/真ん中の部分を繰り返さない（高さを背景画像の高さに設定する）と、縮まないことがわかりました。とても奇妙。