tl; dr? Lassen Sie sich den im folgenden Link gezeigten Mechanismus für die GPU-Beschleunigung in Android Chrome und im Standardbrowser demonstrieren.

UPDATE 2 (2014-01-13 13: 25: 30Z): Lautbref.it's Kommentar unten, das gemeldete Verhalten ist ab Android 4.4 KitKat behoben - aber das Update, das ich unten beschrieben habe, bricht es jetzt! Sod's Gesetz.

UPDATE 1 (2012-11-01 17: 54: 09Z): Das fehlerhafte Verhalten kann aus der Transformationsmatrix abgeleitet werden, die vom berechneten Stil des transformierten Elements gemeldet wird, das einen Pixelwert zurückgibt. Ich werde versuchen, einen Modernizr-Test dafür zu schreiben, um den Weg für mögliche Lösungen zu ebnen.

Ich habe einen Mechanismus zum Verschieben eines Containers entwickelt, um horizontal angeordnete Unterbereiche in voller Breite freizulegen. Grundsätzlich Schieberegler. Da es viel leistungsintensives Zeug und aufwendiges Javascript gibt, möchte ich JS auf ein Minimum beschränken und so viel wie möglich von der rein stilistischen Arbeit in CSS machen. Ich denke, ich habe es ziemlich gut gemacht, wenn man bedenkt - JS ändert nur ein Attribut auf dem Wrapper:

http://jsfiddle.net/barney/VPJuq/ (Mobilgeräte können diese URLs anhängen / anzeigen / anhängen, um die Ergebnisse selbst zu sehen.)

Ein Wort zur Funktionsweise: Behandeln der Registerkarten alsinline-blockMit s kann ich angebenwhite-space: nowrap (Der Rest des Codes in den letzten paar Regeln reduziert im Wesentlichen den Leerraum zwischen den Registerkarten) und ermöglicht es ihnen, horizontal zu stapeln, ohne zu löschen / zurückzukehren, während jeder die volle Breite seines übergeordneten Elements beibehält. Von dort aus bewirkt das Setzen eines negativen Linksversatzes zum Wrapper die Magie. Cool was?

Ein bisschen Kontext: Die Schnittstelle, die ich entwickle, soll in nativen Mobilanwendungen ausgeführt werden - die Kernfunktionalität der Anwendung basiert auf modernster mobilspezifischer Technologie (fragen Sie nicht nach - NDA) - und zwar über eine UIWebView Die Plattform, die die betreffende Technologie derzeit unterstützt, ist Android.

Hier ist mein Problem zweifach:transform: translate arbeitet eine / lot / glatter (translate3d noch mehr alsleft odermargin-left Übergänge, bis zu einem Punkt, der wirklich sehr wünschenswert ist, sind von entscheidender Bedeutung - insbesondere unter Android, da nicht übersetzte Übergänge auf den neuesten Handys mit dem neuesten Betriebssystem immer noch stotternd sind. In Anbetracht dessen ist der Kern des Problems, dass Android das Box-Modell in Bezug auf zu schließen scheinttranslate. Um dies zu demonstrieren, hier ist eintransform-basierte Version desselben Gegenstands, die das Gleiche wie die vorherige Geige tut und in allen Browsern funktioniert, die translate3d unterstützen…

http://jsfiddle.net/barney/EJ7ve

Wenn Sie dies auf dem iPhone überprüfen (erneut durch Anhängen)/show), werden Sie eine verbesserte Bildrate auf iPhones bemerken. Gleiches gilt für Firefox unter Android und wohl auch für Chrome und den Standardbrowser unter Android, mit der Ausnahme, dass hier dertranslateX Der Versatz von -100% bezieht sich irgendwie auf den von allen drei Registerkarten belegten Platz, sodass die Umhüllung gerade so weit verschoben wird, dass keine der Registerkarten sichtbar ist. Dies ist ungerade, da Transformationsprozentsätze so angegeben werden, dass sie sich auf das vollständige Box-Modell des zu transformierenden Elements beziehen. Der berechnete Stil beschreibt die Wrapper-Breite eindeutig als die gleiche wie die übergeordnete Breite (nicht, wie das Ergebnis impliziert, um das Dreifache gestreckt) Tabs unterbringen).

Können wir das als Fehler beschreiben?

Soweit ich das beurteilen kann, gibt es keine reine CSS-Methode (ich bin nicht abgeneigt von der Erkennung von Medienabfragefunktionen, dem Forken von CSS-Anbietern oder dem Hacken von Eigenschaften), um auf dieses Problem zu schließen und es zu beheben. In der Tat ist die einzige Möglichkeit, die gleiche CSS-Mechanik zum Laufen zu bringen, die ich mir jetzt vorstellen kann, das Schnüffeln des UA-Strings für Android und das bedingte Anwenden verschiedener Regeln. Yuk! Wenn ich eine Lösung nur für Android-WebKit erstellen und die Funktionalität an anderen Stellen unterbrechen möchte, kann ich das tatsächliche Verhalten berücksichtigen und die Prozentangaben auf Brüche beziehen:

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

Nicht ideal, da dies die Benutzeroberfläche browserspezifisch macht und voraussetzt, dass wir die Anzahl der Tabs in einer Gruppe kennen, bevor wir unser CSS schreiben. Dies löst das Problem dort jedoch noch nicht einmal vollständig, da der Offset bei einer Änderung der Ausrichtung (und das ist wirklich komisch) auf das von anderen Browsern angezeigte spezifikationskorrekte Verhalten umschaltet!

Ich habe auch versucht, die Übersetzung auf die eigentlichen Registerkarten anzuwenden, was auch sonst überall funktioniert, aber der Browser von Android rendert den Effekt nicht, obwohl die Regeln korrekt übernommen und angewendet wurden. Fremder und Fremder:

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

Erkenntnisse oder Ideen für eine browserübergreifende Lösung werden sehr geschätzt.