2

画像をoverflow:auto divにロードしました。読み込み時に div をスクロールすると、スクロールバーが即座に消えます。たとえば、div の高さを (高さを変更することなく) アニメーション化すると、元に戻すことができますが、それが消えた後でのみです。アニメーションの後、それは永久に修正されます。

-webkit-transform:translationZ(0); を削除すると、これを修正できます。divのCSSからですが、これが提供するパフォーマンスの向上が必要なので（この小さなテストプログラムではなく、派生元のコードに対して）、削除できません。

ここで何が起こっているのか、どうすれば修正できるのでしょうか?

それはすべてjsfiddleにあります：http://jsfiddle.net/forgetcolor/dB38c/5/

また、以下：

HTML:

<div id="overflow"></div>
<p id="btn">click to fix</p>

CSS:

#overflow {
    overflow:auto;
    width:500px;
    height:200px;
    /* comment out the webkit-transform and the problem dissapears 
     * (but I need the transform for acceleration
     */
    -webkit-transform:translateZ(0);
    border:1px solid #000;
}

Javascript:

var scrollbarWidth = 15;
var r = Math.floor((Math.random()*100000)+1);
//adding r to simulate non-cached images
var pagelink = 'http://lorempixel.com/output/city-q-c-1920-1920-4.jpg?'+r;

$('#overflow').html(
    "<img width='485' id='imgload' src='"+pagelink+"' />"
);

$('#btn').click(function() {
    $('#overflow').animate({height:200},0);
});

更新: 提出されたバグレポート: https://code.google.com/p/chromium/issues/detail?id=129186

4

2 に答える 2

4

これを問題のあるスクロール可能オブジェクトに追加すると、問題が解決するようです。

-webkit-transform: translateZ(0);

更新されたフィドルをチェックしてください: http://jsfiddle.net/dB38c/13/

于 2013-01-25T15:44:03.200 に答える
3

これは確かに Chrome のバグです。Chrome Stable と Canary でこれを再現できます (ただし、Webkit Nightly では再現できません)。これを new.crbug.com に報告してもらえますか? ちなみに、テストケースは素晴らしいです。

回避策

overflow:scrollそれまでの間、div の内部の独自に計算されたサイズに条件付きで適用できます。

あなたのコードの場合、

var elem    = $('#overflow');
var heights = elem.children().map(function(){ return $(this).height(); }).get();
var sum     = _.reduce(heights], function(memo, num){ return memo + num; }, 0);

if (sum > elem.innerHeight()) elem.css('overflow', 'scroll');

砂糖にアンダースコアを使用してreduce()いますが、なくてもかまいません。このようなことを行うために子要素のサイズを計算するためのSOに関するいくつかの答えがあることを確認してください（おそらく私のアプローチよりも堅牢です）。

于 2012-05-22T08:29:16.717 に答える