Question

我有一个图像加载到溢出：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

Answer 1

将此添加到违规的可滚动条似乎可以解决问题。

-webkit-transform: translateZ(0);

查看更新后的小提琴： http://jsfiddle.net/dB38c/13/

Answer 2

这确实是Chrome漏洞。我可以在Chrome Stable和Canary中重现这一点（但不能在Webkit Nightly中重现）。你能报告给new.crbug.com吗？顺便说一句，测试用例很棒。

解决方法

与此同时，您可以根据自己计算出的div内部大小来适用overflow:scroll。

如果是您的代码，

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');

我正在使用underscore作为reduce()糖，但你可以不用。{非常肯定在SO上有一些答案用于计算子元素的大小以便做这样的事情（这可能比我的方法更强大）。

溢出时的webkit-transform：自动div导致Chrome中的滚动条消失

2 个答案:

解决方法