2

我已将图像加载到溢出：自动 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()糖，但你可以不用。很确定有一些关于计算子元素大小的答案，以便做这样的事情（这可能比我的方法更强大）。

于 2012-05-22T08:29:16.717 回答