tl; dr? Uzyskaj mechanizm pokazany w poniższym linku, aby zachowywać się z akceleracją GPU w Chrome na Androida i domyślną przeglądarką.

AKTUALIZACJA 2 (2014-01-13 13: 25: 30Z): Wedługbref.itKomentarz poniżej, zgłoszone zachowanie jest naprawione tak jak w przypadku Androida 4.4 KitKat - ale opisana poniżej poprawka przerywa to! Prawo Soda.

AKTUALIZACJA 1 (2012-11-01 17: 54: 09Z): Zachowanie błędne może być odrzucone z macierzy transformacji zgodnie z raportowanym stylem transformowanego elementu, który zwraca wartość piksela. Spróbuję napisać test Modernizr, aby utorować drogę do ewentualnych rozwiązań.

Opracowałem mechanizm do przesuwania pojemnika, aby odsłonić poziomo ułożone sekcje o pełnej szerokości. Zasadniczo przesuwne klapki. Ponieważ jest dużo rzeczy wymagających dużej wydajności i rozbudowanego Javascript, chcę utrzymać JS na minimalnym poziomie i zrobić tyle czysto stylistycznych w CSS. Myślę, że zrobiłem całkiem dobrze, biorąc pod uwagę: JS zmienia atrybut w opakowaniu:

http://jsfiddle.net/barney/VPJuq/ (Urządzenia mobilne mogą dołączać / pokazywać / do tych adresów URL skrzypiec, aby same zobaczyć wyniki)

Słowo o tym, jak to działa: traktowanie kart jakoinline-blocks pozwala mi określićwhite-space: nowrap (reszta kodu w ostatnich kilku regułach w zasadzie zwija białe znaki między kartami) i pozwala im układać się w poziomie bez czyszczenia / powrotu, podczas gdy każda zachowuje pełną szerokość swojego rodzica. Stamtąd ustawienie ujemnego przesunięcia w lewo dla opakowania powoduje magię. Fajne hę?

Teraz trochę kontekstu: interfejs, który tworzę, powinien być uruchamiany w natywnych aplikacjach mobilnych - podstawowa funkcjonalność aplikacji opiera się na najnowocześniejszej technologii mobilnej (nie pytaj - NDA) - za pośrednictwem UIWebView i jedynego platforma, która obecnie obsługuje omawianą technologię, to Android.

Tutaj mój problem jest dwojaki:transform: translate działa a / lot / smoother (translate3d jeszcze bardziej) niżleft lubmargin-left przejścia, do punktu, który jest naprawdę bardzo pożądany, kluczowy - szczególnie na Androidzie, ponieważ nie przetłumaczone przejścia są wciąż jąkające się w najnowszych telefonach z najnowszym systemem operacyjnym. Mając to na uwadze, sedno problemu polega na tym, że Android wydaje się wnioskować inaczej o modelu pudełkowymtranslate. Aby to pokazać, oto jesttransformwersja tej samej rzeczy, która robi to samo, co poprzednia skrzynia, i działa na wszystkich przeglądarkach obsługujących translate3d…

http://jsfiddle.net/barney/EJ7ve

Jeśli przeanalizujesz to na iPhonie (ponownie, dodając/show), zauważysz lepszą częstotliwość klatek na iPhone'ach. To samo dotyczy Firefoksa działającego na Androidzie, a prawdopodobnie także Chrome i domyślnej przeglądarki na Androida, z wyjątkiem tego tutajtranslateX przesunięcie o -100% w jakiś sposób odnosi się do przestrzeni zajmowanej przez wszystkie trzy karty, więc opakowanie przesuwa się na tyle, że żadna z kart nie jest widoczna. Jest to nieparzyste, ponieważ procenty transformacji są określone jako odnoszące się do pełnego modelu transformowanego elementu - styl obliczony jednoznacznie opisuje szerokość otuliny jako taką samą jak jej element macierzysty (nie, jak sugeruje wynik, rozciągnięty 3-krotnie do dostosuj karty).

Czy możemy opisać to jako błąd?

O ile wiem, nie ma metody wnioskowania i rozwiązywania tego problemu za pomocą czystego CSS (nie jestem przeciwny wykrywaniu funkcji zapytań o media, rozwidlaniu dostawców CSS lub hackowaniu własności). W rzeczywistości jedynym sposobem na wykonanie tej samej mechaniki CSS, o której teraz myślę, jest wąchanie ciągu UA dla Androida i warunkowe stosowanie różnych reguł. Yuk! Jeśli mam stworzyć rozwiązanie oparte tylko na systemie Android WebKit i złamać funkcjonalność wszędzie indziej, mogę wziąć faktyczne zachowanie w celu rozliczania i wprowadzania procentów do ułamków:

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

Nie jest to idealne rozwiązanie, ponieważ sprawia, że ​​specyficzny dla przeglądarki interfejs użytkownika i wymaga, abyśmy znali z góry liczbę zakładek w grupie przed napisaniem naszego CSS. Ale to nie rozwiązuje nawet całkowicie problemu, ponieważ przy zmianie orientacji (i to jest naprawdę dziwne), przesunięcie przełącza się na zachowanie poprawne pod względem specyfikacji wyświetlane przez inne przeglądarki!

Próbowałem również zastosować tłumaczenie do rzeczywistych zakładek, które znowu działają wszędzie, ale mimo prawidłowego pobierania i stosowania reguł przeglądarka Androida nie renderuje efektu. Nieznajomy i dziwacz:

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

Wszelkie spostrzeżenia lub pomysły na rozwiązanie dla wielu przeglądarek są bardzo doceniane.