Articles of css3

Css3 transform rotate3d с перспективой, не работающей на Android

У меня есть веб-приложение, которое использует 3D-преобразование, которое отлично работает в Android-браузере на Android 4.1. Однако одно и то же приложение в контейнере PhoneGap приводит к сжатию и расширению анимации, а не к 3D-вращению в перспективе. Есть ли способ заставить его работать в PhoneGap или использовать другой движок рендеринга, который просто не может делать 3D-преобразования? […]

Граница границы с процентным значением, не поддерживаемым в Android-браузерах

Есть известная проблема с использованием значений% в пограничном радиусе на Android-браузерах? Я замечаю, что когда я использую: .element { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } Радиус границы, похоже, работает на всех мобильных браузерах, но когда я использую: .element { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } Радиус границ не применяется в браузерах Android.

Событие Jquery click элемента div в элементе, не запущенном в мобильном Safari

Исправлено: Наконец, я генерирую элементы непосредственно, а не получая jQuery. Обновлено2: Кажется, это понятно. Я сделал пару тестов, только один уволил, что я вставляю в него ссылку. Но я не хочу связывать весь элемент li, но элемент div в li. Обновлено: я сделал некоторые изменения о позициях divs, теперь он работает в android, но мобильный […]

Android-браузер делает границы неправильными, если радиус границы меньше общей ширины границы

Это Android-ошибка 41913. Спасибо, кто открыл его! Это, я думаю, почти так же, как этот старый вопрос , хотя скриншот там выглядит странно иначе, чем то, что я вижу. То, что я пытаюсь сделать, это создать коробку с толстой верхней границей и закругленными углами, как в этом примере JSBIN . Это отлично работает на настольных […]

Сбой переполнения, не работающий на Android

У меня есть изображение, отображаемое в DD, который имеет закругленные углы. Когда я его создаю и получаю на устройстве Android, переполнение: скрытое не работает, и полная картинка отображается над dd. У кого-нибудь еще есть эта проблема и знаете обходное решение / исправление? Это CSS для DD. .empImage { position:absolute; width:90px; height:110px; top:0; right:0; overflow: hidden; […]

Что делает -webkit-text-size-adjust?

Я пытаюсь понять использование -webkit-text-size-adjust:none; , Добавление / удаление, которое не влияет на размеры моего шрифта на Android (хром) или iOS (сафари и хром). Так в чем польза?

Как правильно использовать соотношение -webkit-device-pixel-ratio на iOS и Android?

-webkit-device-pixel-ratio поддерживается как iOS, так и Android, но поскольку iOS не поддерживает target-densitydpi=device-dpi это приводит к разным результатам. Например: @media screen and (-webkit-device-pixel-ratio: 2) { body { font-size: 2em; } } Сделает шрифт хорошо выглядеть на Galaxy Nexus, но на iPhone 4 он будет слишком большим. Есть ли способ эмулировать target-densitydpi=device-dpi на iOS без JavaScript […]

Флеш анимации CSS3 на Android 2.2 (webkit-transform: translate (..) scale (..) в то же время)

Я провел некоторое исследование по Android о анимации CSS3 (преобразование с помощью webkit-перехода). Анимация CSS3 все еще является экспериментальной функцией в Webkit. Если вы попытаетесь одновременно выполнить перевод и масштабирование, вы найдете несколько сбоев и / или ошибок в анимации CSS (например, см. Http://www.youtube.com/watch?v=vZdBVzN1B8Y ). Другими словами, во многих версиях Android свойство -webkit-transform: matrix (…) […]

Линейный градиент CSS3 не работает на Android.

Вопрос новичка здесь, но по какой-то причине я не могу понять это. У меня есть следующий CSS, который отлично работает на моем iPhone, но не на моем Android. От взгляда на демонстрации jQuery Mobile с андроидом я знаю, что он может обрабатывать градиенты фона. благодаря .mydiv { background: -moz-linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE; […]

Как плавно анимировать высоту в CSS или Javascript на мобильных устройствах

Я разрабатываю веб-приложение HTML5 для мобильных устройств и сталкиваюсь с небольшими проблемами с плавной анимацией. По сути, когда пользователь нажимает кнопку, ящик (div с высотой: 0px) должен анимироваться до заданной высоты (в пикселях), и содержимое будет добавлено к этому ящику. Если у вас есть учетная запись Pinterest, вы можете увидеть анимацию, как сейчас, на странице […]