强制正确的CSS3转换率除pretation在Android [英] Force correct CSS3 transform percentage interpretation on Android

问题描述

TL;博士？获取在下面的链接的行为与Android的Chrome浏览器和GPU加速论述的机制;默认浏览器。

更新2 （2014年1月13日13：25：30Z）：根据简表。它的下面的评论，报道的行为定为Android 4.4系统的奇巧的 - 但我在下面所描述的修复，现在打破它！草皮的法律。

更新1 （2012-11-01 17：54：09Z）：该错误行为是从所报告的转换元件，它返回一个像素值的计算样式变换矩阵inferrable 。我会尝试写一个Modernizr的测试，这铺平道路，为任何可能的解决方案。

我已经开发了一种机制，滑动容器显示全角，水平排列的子部分。滑动片，基本上是这样。因为有很多的性能密集型的东西，并阐述Javascript的事情，我想保持JS到最小，做尽可能多的纯粹风格的CSS。我想我已经做了pretty的同时，考虑 - JS只是改变了对包装的属性：

（W /左）

http://jsfiddle.net/barney/VPJuq/ （移动设备可以追加/显示/到这些网址捣鼓自己看到的结果）

这是如何工作的一个字：治疗标签为 inline-block的 S允许我指定空白：NOWRAP （的code。在过去的规则，剩下的基本上是折叠标签之间的空白），并允许他们水平堆栈不清除/返回，所有的，而每一个保持其母公司的整个宽度。从那里，设置负左偏移到封装器的魔力。很酷吧？

现在，有点背景的：要在本地移动应用程序的运行我开发的界面 ​​- 应用程序的核心功能依赖于前沿的移动专用技术（不要问 - NDA） - 通过一个UIWebView，而且目前支持该技术问题的唯一平台的是Android。

下面我的问题是双重的：转换：转换的工作方式/批号/顺畅（translate3d <$ C C $>更是如此）比离开或利润率左的转换，到一个点，是真的希望，交界性至关重要的 - 特别是在Android上，看到非翻译转换仍然在最新的手机与最新的操作系统stutteringly冰川。考虑到这一点，问题的症结是，Android的关于翻译时似乎不同推断盒模型。为了说明，这里有一个转换的同样的事情，它做同样的事情为previous小提琴，并适用于所有支持translate3d ... <浏览器为基础的版本/ P> （W /译）

http://jsfiddle.net/barney/EJ7ve

如果您检查这对iPhone（同样，通过追加 /节目），你会发现在iPhone提高帧速率。这同样适用于火狐在Android上，可以说是对Chrome和Android上的默认浏览器中运行过，但此处的 translateX -100％偏置某种程度上是指空间所有三个选项卡所占据，所以包装幻灯片刚够这样，没有一个选项卡均可见。这很奇怪，因为变换百分比被指定为与所述元件的完整盒模型被转化 - 和计算样式明确地描述了该包装的宽度是相同的作为其父（未视结果意味着，拉伸3倍至适应选项卡）。

我们能形容这是一个错误？

据我所知，有没有纯CSS（我不反对媒体查询功能检测，CSS厂商分叉或财产的黑客攻击）infering和解决这一问题的方法。事实上使这个相同的CSS机械师的工作，我现在能想到的是嗅UA字符串Android和有条件地适用不同规则的唯一途径。育！如果我做一个Android的WebKit的，唯一的解决办法，并打破功能其他地方，我可以采取事实上的行为来考虑，使百分数是指部分：

（W /翻译 - Android版的更新：不必要和休息在Android 4.4奇巧的）

http://jsfiddle.net/barney/nFt5t/

不理想的，因为这使得用户界面浏览器特定的，需要我们知道了前面的标签组中的数目写入我们的CSS之前。但是，这还没有完全解决的问题有，因为，对方向变化（这是很奇怪），偏移转换到规范的，正确的行为显示的其他浏览器！

我也试着将翻译到实际的标签，而这又工作在其他地方，但尽管正确拿起和运用规则，Android的浏览器将不渲染效果。陌生人和strangerer：

（W /翻译，工作在Android上的理论，不工作在Android上的话）

http://jsfiddle.net/barney/EJ7ve/9

任何见解和想法跨浏览器的解决方案多AP preciated。

解决方案

我使用的是Android 2.3，并不能产生你描述（与问候您的评论的具体问题的 - 100％某种程度上是指空间所有三个选项卡占用的）。不过，我正经历导致间歇性/跳动过渡等问题以及其他一些怪事我并没有真正调查。

有关起见谈话，让我们假设该包装是500px的宽

通过使用inline-block的/ NOWRAP技术（这是从YUI很下-AP preciated布局技术），你的3片面板占用的水平空间1500px。根据你的描述，你需要欺骗浏览器，以为所有的选项卡板一起被服用的水平空间高达500px的。结帐我的小提琴，它主要使用一些负面的利润，转化为欺骗的方式​​，我认为应该工作的浏览器，但我不能对它进行测试。无论哪种方式，我的例子中的固定的怪事，我遇到了我的Andr​​oid 2.3 - 所以你可能想用它无论哪种方式

http://jsfiddle.net/ryanwheale/EJ7ve/29/

（和相关的CSS）

  .tabs＆GT; * {
    宽度：100％;
    保证金左：-100％;
}
.tabs＆GT; *：第一胎{
    -webkit变换：translate3d（0％，0，0）;
    -moz变换：translate3d（0％，0，0）;
    -ms变换：translate3d（0％，0，0）;
    -o-变换：translate3d（0％，0，0）;
    变换：translate3d（0％，0，0）;
}
.tabs＆GT; *：第一胎+ * {
    -webkit变换：translate3d（100％，0，0）;
    -moz变换：translate3d（100％，0，0）;
    -ms变换：translate3d（100％，0，0）;
    -o-变换：translate3d（100％，0，0）;
    变换：translate3d（100％，0，0）;
}
.tabs＆GT; *：第一胎+ * + * {
    -webkit变换：translate3d（200％，0，0）;
    -moz变换：translate3d（200％，0，0）;
    -ms变换：translate3d（200％，0，0）;
    -o-变换：translate3d（200％，0，0）;
    变换：translate3d（200％，0，0）;
}
.tabs＆GT; *：第一胎+ * + * + * {
    -webkit变换：translate3d（300％，0，0）;
    -moz变换：translate3d（300％，0，0）;
    -ms变换：translate3d（300％，0，0）;
    -o-变换：translate3d（300％，0，0）;
    变换：translate3d（300％，0，0）;
}
 

注意：我尝试使用，而不是上面的变换相对定位，我仍然得到我的上述相同的怪事

tl;dr? Get the mechanism demonstrated in the link below to behave with GPU acceleration on Android Chrome & default browser.

UPDATE 2 (2014-01-13 13:25:30Z): According to bref.it's comment below, the reported behaviour is fixed as of Android 4.4 KitKat — but the fix I described below now breaks it! Sod's law.

UPDATE 1 (2012-11-01 17:54:09Z): The buggy behaviour is inferrable from the transformation matrix as reported by the computed style of the transformed element, which returns a pixel value. I'll try to write a Modernizr test for this to pave the way for any possible solutions.

I've developed a mechanism for sliding a container to reveal full-width, horizontally arranged sub-sections. Sliding tabs, basically. Because there's a lot of performance intensive stuff and elaborate Javascript going on, I want to keep JS to the minimum and do as much of the purely stylistic in CSS. I think I've done pretty well, considering — JS just changes an attribute on the wrapper:

(w/ left)

http://jsfiddle.net/barney/VPJuq/ (mobile devices can append /show/ to these fiddle URLs to see the results by themselves)

A word on how this works: treating the tabs as inline-blocks allows me to specify white-space: nowrap (the rest of the code in the last couple of rules essentially collapses the whitespace between the tabs) and allow them to stack horizontally without clearing / returning, all the while each maintaining the full width of their parent. From there, setting a negative left offset to the wrapper does the magic. Cool, huh?

Now, a bit of context: the interface I'm developing is to be run in native mobile applications — the application's core functionality relies on cutting edge mobile-specific technology (don't ask — NDA) — via a UIWebView, and the only platform that currently supports the technology in question is Android.

Here my problem is twofold: transform: translate works a /lot/ smoother (translate3d even more so) than left or margin-left transitions, to a point that is really really desirable, borderline crucial — especially on Android, seeing as non-translated transitions are still stutteringly glacial on the latest phones with the latest OS. With that in mind, the crux of the issue is that Android seems to infer the box model differently when relating to translate. To demonstrate, here's a transform-based version of the same thing, which does the same thing as the previous fiddle, and works on all browsers that support translate3d…

(w/ translate)

http://jsfiddle.net/barney/EJ7ve

If you examine this on iPhone (again, by appending /show), you'll notice improved frame rate on iPhones. The same goes for Firefox running on Android, and arguably on Chrome and the default browser on Android too, except that here, the translateX offset of -100% somehow refers to the space occupied by all three tabs, so the wrapper slides just enough such that none of the tabs are visible. This is odd, since transform percentages are specified as relating to the full box model of the element being transformed — and computed style unambiguously describes the wrapper width as being the same as its parent (not, as the result implies, stretched 3-fold to accomodate the tabs).

Can we describe this as a bug?

As far as I can tell, there's no pure-CSS (I'm not averse to media query feature detection, CSS vendor forking or property hacking) method of infering and resolving this problem. In fact the only way of making this same CSS mechanic work that I can think of now is sniffing the UA string for Android and applying different rules conditionally. Yuk! If I'm to make an Android-WebKit-only solution, and break functionality everywhere else, I can take the de facto behaviour in to account and make the percentages refer to fractions:

(w/ translate — for Android update: unnecessary and breaks on Android 4.4 KitKat)

http://jsfiddle.net/barney/nFt5t/

Not ideal, as this makes the UI browser-specific and requires that we know up front the number of tabs in a group before writing our CSS. But this doesn't even completely solve the problem there, as, on orientation change (and this is really weird), the offset switches to the specification-correct behaviour displayed by other browsers!

I've also tried applying the translation to the actual tabs, which again works everywhere else, but despite correctly picking up and applying the rules, Android's browser won't render the effect. Stranger and strangerer:

(w/ translate, working on Android's theory, not working on Android at all)

http://jsfiddle.net/barney/EJ7ve/9

Any insights or ideas for a cross-browser solution much appreciated.

解决方案

I am using Android 2.3 and can't produce the exact problem you describe (with regards to your comment "-100% somehow refers to the space occupied by all three tabs"). However, I was experiencing other issues resulting in intermittent/jumpy transitions and some other weirdness I didn't really investigate.

For the sake of conversation, lets assume that the "wrapper" is 500px wide.

By using your inline-block/nowrap technique (which is a very under-appreciated layout technique from YUI), your 3 tab panels are taking up 1500px of horizontal space. Based on what you describe, you need to spoof the browser into thinking all of tab panels together are taking up 500px of horizontal space. Checkout my fiddle, which essentially uses some negative margins and translates to trick the browser in a way I think should work, but I can't test it. Either way, my example fixed the weirdness I was experiencing on my Android 2.3 - so you may want to use it either way.

http://jsfiddle.net/ryanwheale/EJ7ve/29/

(and the relevant 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);
}

Note: I tried using relative positioning instead of the transforms above, and I was still getting the same weirdness I described above.

这篇关于强制正确的CSS3转换率除pretation在Android的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！