tl;博士 ?获取以下链接中演示的机制,以在 Android Chrome 和默认浏览器上使用 GPU 加速。
更新 2 (2014-01-13 13:25:30Z):根据 bref.it在下面的评论中,报告的行为自 Android 4.4 KitKat 起已修复 - 但我在下面描述的修复现在破坏了它!索德定律。
更新 1 (2012-11-01 17:54:09Z):从转换矩阵的转换矩阵中可以推断出错误行为,如转换元素的计算样式所报告的那样,它返回一个像素值。我将尝试为此编写一个 Modernizr 测试,为任何可能的解决方案铺平道路。
我开发了一种滑动容器以显示全宽、水平排列的子部分的机制。滑动标签,基本上。因为有很多性能密集型的东西和精心制作的 Javascript,我希望将 JS 保持在最低限度,并在 CSS 中做尽可能多的纯粹风格。我认为我做得很好,考虑到 - JS 只是更改了包装器上的一个属性:
(带左)
http://jsfiddle.net/barney/VPJuq/
(移动设备可以将/show/附加到这些 fiddle URL 以自行查看结果)
关于它是如何工作的一句话:将标签视为 inline-block
s 允许我指定 white-space: nowrap
(最后几条规则中的其余代码基本上折叠了选项卡之间的空白)并允许它们水平堆叠而无需清除/返回,同时每个都保持其父级的全宽。从那里开始,为包装器设置一个负的左偏移量就很神奇。很酷吧?
现在,一些上下文:我正在开发的界面将在本地移动应用程序中运行——应用程序的核心功能依赖于尖端的移动特定技术(不要问 - NDA)——通过 UIWebView,唯一的目前支持相关技术的平台是 Android。
我的问题是双重的:transform: translate
比 translate3d
更流畅( left
甚至更流畅)或 margin-left
过渡,到了真正令人向往的程度,临界点至关重要——尤其是在 Android 上,看到非翻译过渡在具有最新操作系统的最新手机上仍然结结巴巴。考虑到这一点,问题的关键在于 Android 在与 translate
相关时似乎以不同的方式推断盒模型。 .为了演示,这里有一个 transform
基于相同内容的版本,与之前的 fiddle 做相同的事情,并且适用于所有支持 translate3d 的浏览器......
(带翻译)
http://jsfiddle.net/barney/EJ7ve
如果您在 iPhone 上检查这一点(同样,通过附加 /show
),您会注意到 iPhone 上的帧速率有所提高。在 Android 上运行的 Firefox 也是如此,可以说在 Chrome 和 Android 上的默认浏览器上也是如此,除了这里的 translateX
-100% 的偏移量以某种方式指代所有三个选项卡占用的空间,因此包装器滑动到足以使任何选项卡都不可见的程度。这很奇怪,因为转换百分比被指定为与正在转换的元素的完整框模型相关 - 并且计算样式明确地将包装器宽度描述为与其父项相同(不是,正如结果所暗示的那样,拉伸(stretch) 3 倍到容纳标签)。
我们可以将其描述为错误吗?
据我所知,没有纯 CSS(我不反对媒体查询功能检测、CSS 供应商 fork 或属性黑客)方法来推断和解决这个问题。事实上,我现在能想到的使相同的 CSS 机制起作用的唯一方法是嗅探 Android 的 UA 字符串并有条件地应用不同的规则。哎呀!如果我要制作一个仅限 Android-WebKit 的解决方案,并在其他地方破坏功能,我可以考虑实际行为并使百分比指的是分数:
(带翻译 — 用于 Android 更新:Android 4.4 KitKat 上的不必要和中断)
http://jsfiddle.net/barney/nFt5t/
不理想,因为这使得 UI 浏览器特定,并且要求我们在编写 CSS 之前预先知道组中选项卡的数量。但这甚至不能完全解决那里的问题,因为在方向改变时(这真的很奇怪),偏移量切换到其他浏览器显示的规范正确行为!
我还尝试将翻译应用到实际的选项卡,这在其他地方也同样适用,但尽管正确选择和应用规则,Android 的浏览器不会呈现效果。陌生人与陌生人:
(带翻译,研究 Android 的理论,根本不适用于 Android)
http://jsfiddle.net/barney/EJ7ve/9
非常感谢有关跨浏览器解决方案的任何见解或想法。
最佳答案
我使用的是 Android 2.3 并且无法产生您所描述的确切问题(关于您的评论“-100% 以某种方式指代所有三个选项卡占用的空间”)。但是,我遇到了其他问题,导致间歇性/跳跃式转换以及其他一些我没有真正调查过的奇怪现象。
为了便于交流,让我们假设“包装器”的宽度为 500 像素。
通过使用您的 inline-block/nowrap 技术(这是 YUI 中非常不受欢迎的布局技术),您的 3 个标签面板占用了 1500 像素的水平空间。根据您的描述,您需要欺骗浏览器,使其认为所有选项卡面板一起占用了 500 像素的水平空间。查看我的 fiddle ,它本质上使用了一些负边距,并以我认为应该工作的方式转换为欺骗浏览器,但我无法对其进行测试。无论哪种方式,我的示例 固定 我在我的 Android 2.3 上遇到的奇怪之处 - 所以你可能想以任何一种方式使用它。
http://jsfiddle.net/ryanwheale/EJ7ve/29/
(和相关的CSS)
.tabs > * {
width: 100%;
margin-left: -100%;
}
.tabs > *:first-child {
-webkit-transform: translate3d(0%, 0, 0);
-moz-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.tabs > *:first-child + * {
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.tabs > *:first-child + * + * {
-webkit-transform: translate3d(200%, 0, 0);
-moz-transform: translate3d(200%, 0, 0);
-ms-transform: translate3d(200%, 0, 0);
-o-transform: translate3d(200%, 0, 0);
transform: translate3d(200%, 0, 0);
}
.tabs > *:first-child + * + * + * {
-webkit-transform: translate3d(300%, 0, 0);
-moz-transform: translate3d(300%, 0, 0);
-ms-transform: translate3d(300%, 0, 0);
-o-transform: translate3d(300%, 0, 0);
transform: translate3d(300%, 0, 0);
}
注:我尝试使用相对定位而不是上面的变换,但我仍然遇到与上面描述的相同的怪异现象。
关于javascript - 在 Android 上强制正确的 CSS3 转换百分比解释,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13156805/