28

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 URLs以自己查看结果)

关于这是如何工作的一句话:将选项卡视为inline-blocks 允许我指定white-space: nowrap(最后几条规则中的其余代码基本上折叠了选项卡之间的空白)并允许它们水平堆叠而不清除/返回,一直每个都保持其父级的完整宽度。从那里开始,为包装器设置一个负的左偏移量就可以了。酷吧?

现在,有点背景:我正在开发的界面将在原生移动应用程序中运行——应用程序的核心功能依赖于尖端的移动特定技术(不要问——NDA)——通过 UIWebView,并且唯一的目前支持该技术的平台是 Android。

在这里,我的问题是双重的:比or过渡transform: translate更平滑(translate3d甚至更平滑),达到一个非常理想的临界点,尤其是在 Android 上,因为非翻译的过渡在最新版本中仍然结结巴巴最新操作系统的手机。考虑到这一点,问题的症结在于 Android 在与. 为了演示,这里有一个基于 -based 的版本,它与之前的 fiddle 做同样的事情,并且适用于所有支持 translate3d 的浏览器......</p> (带翻译)leftmargin-lefttranslatetransform

http://jsfiddle.net/barney/EJ7ve

如果您在 iPhone 上检查这一点(再次通过附加/show),您会注意到 iPhone 上的帧速率有所提高。在 Android 上运行的 Firefox 也是如此,可以说在 Chrome 和 Android 上的默认浏览器上也是如此,除了在这里,translateX-100% 的偏移量以某种方式指代所有三个选项卡所占用的空间,所以包装器滑动得足够多,以至于所有选项卡都不可见。这很奇怪,因为变换百分比被指定为与被变换元素的完整盒子模型相关——并且计算样式明确地将包装器宽度描述为与其父级相同(而不是,正如结果所暗示的那样,拉伸 3 倍到容纳标签)。

我们可以将其描述为一个错误吗?

据我所知,没有纯 CSS(我不反对媒体查询功能检测、CSS 供应商分叉或属性黑客)方法来推断和解决这个问题。事实上,我现在能想到的使相同的 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

非常感谢任何有关跨浏览器解决方案的见解或想法。

4

3 回答 3

3

我使用的是 Android 2.3,无法产生您描述的确切问题(关于您的评论“-100% 以某种方式指的是所有三个选项卡占用的空间”)。但是,我遇到了其他问题,导致间歇性/跳跃式转换和其他一些我没有真正调查过的奇怪现象。

为了便于讨论,我们假设“包装器”的宽度为 500 像素。

通过使用您的 inline-block/nowrap 技术(这是 YUI 中一种非常被低估的布局技术),您的 3 个选项卡面板占用了 1500 像素的水平空间。根据您的描述,您需要欺骗浏览器,使其认为所有选项卡面板一起占用了 500 像素的水平空间。查看我的小提琴,它本质上使用了一些负边距并转换为以我认为应该有效的方式欺骗​​浏览器,但我无法对其进行测试。无论哪种方式,我的示例都解决了我在 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);
}

注意:我尝试使用相对定位而不是上面的变换,但我仍然得到与上面描述的相同的怪异。

于 2014-02-07T07:28:49.090 回答
2

我遇到了类似的问题。

对我来说,问题是:

* {
    box-sizing: border-box;
}

我将边框框应用于所有元素。一旦我删除了这个,百分比 translate3d 就被正确应用了。

于 2014-01-29T14:51:10.100 回答
0

如果 CSS 不工作(并且应该工作),您需要一个解决方法。请检查我的修改版本:

http://jsfiddle.net/EG9v8/1/

function makeCss(index){
    // Calculate the offset, given the tabs size
    var size = -$('.tabs').width() * index;
    // Create style for the given offset.
    var css = '-webkit-transform: translate3d('+size+'px, 0, 0);';
    css += '-moz-transform: translate3d('+size+'px, 0, 0);';
    css += '-ms-transform: translate3d('+size+'px, 0, 0);';
    css += '-o-transform: translate3d('+size+'px, 0, 0);';
    css += 'transform: translate3d('+size+'px, 0, 0);';
    return css;
}

$('.tabLinks a').on('click', function(e){
    e.preventDefault();

    var index = $(this).index();

    // Set the current style
    $('.tabs').attr('style', makeCss(index));
});
于 2014-02-05T19:11:49.220 回答