【发布时间】：2014-12-09 00:12:10
【问题描述】：
我如何告诉（用于测试目的）是否为 CSS 动画启用了硬件加速？
我有以下代码，它基本上放大了一个元素并使其全屏（不使用 HTML5 全屏 API）。当使用 jQuery 动画时，它在大多数手机上运行起来就像一只口吃的哮喘乌龟，所以我改用 CSS3。
这里是 jsFiddle 示例：
$("#makeFullscreen").on("click", function() {
var map = $("#map"),
mapTop = map.offset().top,
mapLeft = map.offset().left;
$("#map").css({
"position": "fixed",
"top": mapTop,
"left": mapLeft,
"width": map.outerWidth(true),
"height": map.outerHeight(true)
});
setTimeout(function(){map.addClass("fullscreen")},1);
return false;
});.mapContainer {
width: 150px;
height: 200px;
position: relative;
margin: 0 auto;
}
.map {
background: #00f;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
}
.fullscreen {
-webkit-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
-moz-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
-ms-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
-o-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}
#makeFullscreen {
margin-top: 20px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mapContainer">
<div id="map" class="map">
<button id="makeFullscreen">Make Fullscreen</button>
</div>
</div>这会添加一个类，并且元素会使用 CSS 转换从一个状态转换到下一个状态。这比 jQuery 快，但在 iOS 和 android 上仍然卡顿。
但我读到here，您可以通过指定基本上什么都不做的 3d 变换来强制使用 GPU 加速过渡，如下所示：
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
但是，在将它添加到我的 CSS 之后，我发现视觉效果没有任何改善。
那么问题...
有没有办法查看是否已通过任何浏览器中的开发工具启用硬件加速？我不需要用脚本来检测这个，我只是想知道用于测试目的。
【问题讨论】：
-
你不能直接说。我见过人们做的唯一一件事就是运行某种性能测试来测试正在产生的性能。几年前，确实在某些浏览器中，让您的过渡到 3d 过渡可以触发更多的 GPU 支持 - 我不知道目前的情况如何。
-
@TachyonVortex 我不想使用代码来检测这一点并提供回退。我想知道是否有办法通过任何浏览器中的开发工具来做到这一点。我已经改变了我的问题以反映这一点，因为我认为这最初并不明确。
-
我知道这条评论与问题无关，但我必须分享我使用翻译属性的经验。除非您真的需要，否则请不要使用它，因为在具有此属性的元素之后，渲染引擎正在创建一个新的流容器，因此例如，如果您想使用固定位置，它将被渲染为具有翻译的元素的相对位置财产。阅读此线程，stackoverflow.com/questions/2637058/…
-
@Ivica 您的评论具有误导性。虽然
translate在固定定位的情况下可能不是最好的，但对于其他定位的动画，它总是更好。fixed定位目前是例外，而不是标准。
标签： jquery css css-animations hardware-acceleration