Tag: 硬件加速

CSS硬件加速宽度？

我正在尝试构建一个Phonegap应用程序，允许用户通过移动中间分隔符来更改两列布局的大小。 我能够使这个工作，但有一个巨大的UX问题：它是滞后的。 这并不可怕，但在最新的iPad上它甚至引人注目，让我担心。 这是我的JSresize： $(“div”).on(“touchmove”, “#columnResizeIcon”, function(e) { e.preventDefault(); var left = e.originalEvent.touches[0].pageX; var right = $(“#columnContainer”).width() – left; $(“#leftColumn”).css({ “width”:left – 1 + “px”, “right”:”auto”, }); $(“#rightColumn”).css({ “width”:right – 1 + “px”, “left”:”auto”, }); $(“#columnResize”).css({ “-webkit-transform”:”translate3d(” + left + “px” + “, 0, 0)”, “left”:”auto”, }); $(“#columnResizeIcon”).css({ “-webkit-transform”:”translate3d(” + left + “px” + “, […]

测试是否为CSS动画启用了硬件加速？

我如何判断（出于测试目的）是否为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; […]