Chrome中的不透明度转换无法获得60fps

Question

我想要60fps或更高的不透明度转换，并使用Chrome开发工具时间轴进行测试。我已经创建了一个jsfiddle（http://jsfiddle.net/jnoody/Zt8nd/）来演示，但基本上它只是一个div，它每隔几秒就会切换一次，并且两个状态的不透明度都会转换。它看起来很好看，但我已经开始相信60fps应该是可以实现的。

HTML：

<div id="fader"></div>

CSS：

#fader {
    height: 1000px;
    width: 1000px;
    background-color: grey;
    opacity: 1;
    transition: 1s opacity;
}

#fader.fadeOut {
    opacity: 0;
    transition: 1s opacity;
}

JavaScript的：

var fader = document.getElementById('fader');
setInterval(function () {
    fader.classList.toggle('fadeOut');
}, 2000);

我也尝试过null变换hack，但无论哪种方式，它似乎都在自己的图层中（使用“渲染合成边框图层”）。

Answer 1

不确定这是否有帮助，但我确实得到了60fps的小提琴，进入完整的窗口（即附加/显示小提琴）

帧速率下降只有一个时刻，但我相信这是javascript执行的时候（因此，与可用的GPU加速无关）