Javascript 在Android上强制更正CSS3转换百分比解释

tl；dr？获取下面链接中演示的机制，在Android Chrome和默认浏览器上使用GPU加速

更新2（2014-01-13 13:25:30Z）：根据下面的评论，报告的行为在Android 4.4 KitKat时已经修复，但我下面描述的修复现在破坏了它！苏德定律

更新1（2012-11-01 17:54:09Z）：根据转换元素的计算样式报告的转换矩阵，可以推断buggy行为，该转换矩阵返回像素值。我将尝试为此编写一个现代化测试，为任何可能的解决方案铺平道路

我开发了一种滑动容器的机制，以显示全宽、水平排列的子部分。基本上是滑动标签。因为有很多性能密集型的东西和复杂的Javascript正在进行，所以我希望将JS保持在最低限度，并在CSS中尽可能多地使用纯粹的风格。考虑到-JS只是更改了包装器上的一个属性，我认为我做得很好：

（w/左） （移动设备可以附加/显示/到这些fiddle URL，以便自己查看结果）

这是如何工作的：将选项卡视为

内联块

s允许我指定

空白：nowrap

（最后两条规则中的其余代码基本上折叠了选项卡之间的空白），并允许它们在不清除/返回的情况下水平堆叠，始终保持其父对象的全宽。从这里开始，为包装设置一个负的左偏移量就起到了神奇的作用。酷吧

现在，有一点背景：我正在开发的界面将通过UIWebView在本地移动应用程序中运行——该应用程序的核心功能依赖于尖端的移动特定技术（不问-NDA）——目前唯一支持该技术的平台是Android

这里我的问题有两个：

transform:translate

比

left

或

margin left

转换更有效/更平滑（

translate3d

甚至更有效），到了一个真正令人满意的临界点，尤其是在Android上，在使用最新操作系统的最新手机上，未经翻译的过渡仍然令人口吃。考虑到这一点，问题的关键在于，当涉及到

translate

时，Android似乎对box模型的推断有所不同。为了演示，这里有一个基于

转换
的版本，它的功能与前面的fiddle相同，并且可以在所有支持translate3d的浏览器上运行

（w/翻译）

如果您在iPhone上检查这一点（再次添加
/show
），您会发现iPhone上的帧速率有所提高。运行在Android上的Firefox也是如此，Chrome和Android上的默认浏览器也是如此，除了这里，
translateX
偏移量-100%指的是所有三个选项卡所占用的空间，所以包装器的滑动刚好可以使所有选项卡都不可见。这很奇怪，因为转换百分比被指定为与正在转换的元素的完整框模型相关，并且计算样式明确地描述了包装宽度与其父元素相同（而不是像结果所暗示的那样，拉伸3倍以容纳选项卡）

我们能把它描述成一个bug吗

据我所知，没有纯CSS（我不反对媒体查询功能检测、CSS供应商分叉或属性黑客）方法来推断和解决这个问题。事实上，我现在能想到的让同样的CSS机制工作的唯一方法就是嗅探Android的UA字符串并有条件地应用不同的规则。大笑！如果我要制作一个Android WebKit专用解决方案，并在其他任何地方破坏功能，我可以考虑事实上的行为，并使百分比指分数：

（w/translate-用于Android更新：Android 4.4 KitKat上的不必要和中断）

这并不理想，因为这使得UI浏览器特定，并且要求我们在编写CSS之前预先知道组中的选项卡数量。但这甚至不能完全解决问题，因为在方向改变时（这真的很奇怪），偏移量切换到其他浏览器显示的规范正确行为

我还尝试将翻译应用到实际的选项卡上，这在其他地方同样有效，但尽管正确地选择和应用了规则，Android浏览器不会呈现这种效果。陌生人和陌生人：

（w/translate，致力于Android的理论，根本不致力于Android）

非常感谢您对跨浏览器解决方案的任何见解或想法。
我遇到了类似的问题

对我来说，问题是：

* {
    box-sizing: border-box;
}

我将边框框应用于所有元素。一旦我删除了这个，translate3d的百分比就被正确地应用了。
如果CSS不起作用（并且应该起作用），你需要一个解决办法。请检查我的修改版本：


我使用的是Android 2.3，无法产生您所描述的确切问题（关于您的评论”-100%指的是所有三个选项卡所占用的空间）。然而，我遇到了其他问题，导致了间歇性/跳跃性的过渡和一些我没有真正调查的奇怪现象

为了便于交谈，让我们假设“包装器”的宽度为500px

通过使用内联block/nowrap技术（这是YUI非常不受欢迎的布局技术），3个选项卡面板占用了1500px的水平空间。根据您的描述，您需要欺骗浏览器，使其认为所有选项卡面板一起占用了500px的水平空间。检查我的小提琴，它基本上使用了一些
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));
});

.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);
}