Подтвердить что ты не робот

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

ТЛ, д-р? Получить механизм, показанный в приведенной ниже ссылке, вести себя с ускорением 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 позволяет мне указать white-space: nowrap (остальная часть кода в последних парах правил существенно разрушает пробелы между вкладками) и позволяет им стекать по горизонтали без очистки/возврата, причем все они сохраняют всю ширину своего родителя. Оттуда установка отрицательного левого смещения в обертку делает магию. Круто, да?

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

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

(w/translate)

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

* {
    box-sizing: border-box;
}

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

Ответ 3

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