Закрепить правильную интерпретацию процента преобразования CSS3 на Android

Tl; dr ? Получить механизм, показанный в приведенной ниже ссылке, вести себя с ускорением GPU в браузере Android Chrome и по умолчанию.

ОБНОВЛЕНИЕ 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/ (мобильные устройства могут добавлять / показывать / к этим URL-адресам для просмотра результатов самостоятельно)

Слово о том, как это работает: обработка вкладок как inline-block s позволяет мне указывать white-space: nowrap (остальная часть кода в последних парах правил по существу сворачивает пробелы между вкладками) и позволяет им стекать по горизонтали Без очистки / возврата, причем все они сохраняют всю ширину своего родителя. Оттуда установка отрицательного левого смещения в обертку делает магию. Круто, да?

Теперь немного контекста: интерфейс, который я разрабатываю, должен запускаться в родных мобильных приложениях – основная функциональность приложения основана на передовой технологии для мобильных устройств (не спрашивайте – NDA) – через UIWebView, и единственная Платформа, которая в настоящее время поддерживает технологию, о которой идет речь, – это Android.

Здесь моя проблема двоякая: transform: translate работает a / lot / smoother ( translate3d даже больше), чем left или margin-left переходы, до такой степени, которая действительно очень нужна, пограничная критическая – особенно на Android, рассматривая как не переведенную Переходы по-прежнему замирают на последних телефонах с новейшей ОС. Имея это в виду, суть проблемы заключается в том, что Android, по-видимому, выводит модель окна по-разному, когда речь идет о translate . Чтобы продемонстрировать, вот transform версия того же самого, что делает то же самое, что и предыдущая скрипка, и работает во всех браузерах, которые поддерживают translate3d …

(С переводом)

http://jsfiddle.net/barney/EJ7ve

Если вы изучите это на iPhone (опять же, добавив /show ), вы заметите улучшенную частоту кадров на iPhone. То же самое касается Firefox, работающего на Android, и, возможно, у Chrome и браузера по умолчанию на Android тоже, за исключением того, что здесь смещение translateX -100% как-то относится к пространству, занятому всеми тремя вкладками, поэтому обертка скользит достаточно Что ни одна из вкладок не видна. Это нечетно, так как процент трансформации указывается как относящийся к полной коробке модели преобразуемого элемента, а вычисляемый стиль однозначно описывает ширину обертки как ту же, что и ее родительская (а не, как следует из результата), растягивается в 3 раза Разместить вкладки).

Можем ли мы описать это как ошибку?

Насколько я могу судить, нет чистых CSS (я не прочь обнаружить функцию запросов к медиа-материалам, взлома поставщика услуг или взлома собственности) метод вывода и решения этой проблемы. Фактически единственный способ сделать эту же работу с CSS-машиной, о которой я могу сейчас думать, – это обнюхать строку UA для Android и условно применять разные правила. Юк! Если я хочу сделать решение только для Android-WebKit и повредить функциональность во всем мире, я могу принять де-факто поведение в учетной записи и сделать проценты ссылкой на фракции:

(W / translate – для Android update: не нужно и перерывы на Android 4.4 KitKat )

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

Не идеально, так как это делает интерфейс браузера индивидуальным и требует, чтобы мы знали перед собой количество вкладок в группе перед написанием нашего CSS. Но это даже не полностью решает проблему там, так как при изменении ориентации (и это действительно странно) смещение переключается на правильное поведение спецификации, отображаемое другими браузерами!

Я также попытался применить перевод к фактическим вкладкам, который снова работает повсюду, но, несмотря на правильное принятие и применение правил, браузер Android не окажет эффекта. Незнакомка и незнакомец:

(W / translate, работая над теорией Android, вообще не работая с Android)

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

Любые идеи или идеи для кроссбраузерного решения очень ценятся.

Я использую 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); } 

Примечание. Я попытался использовать относительное позиционирование вместо преобразований выше, и я все еще получал ту же странность, которую я описал выше.

У меня возникла аналогичная проблема.

Для меня проблема была:

 * { box-sizing: border-box; } 

У меня была рамка для всех элементов. Как только я удалил это, процент translate3d был применен правильно.

Если 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)); });