Кнопка не перерисовывается в активном состоянии (Android Webkit) - PullRequest
1 голос
/ 26 марта 2012

Я портирую веб-приложение с iPhone на Android. Неожиданно кнопки работают как обычно, за исключением того, что они не меняют фон в активном состоянии. В Mobile Safari, на настольном Chrome все ок. Есть идеи, в чем может быть проблема?

У меня много трюков, таких как

img, input, div, button, table:focus
{
    outline-width: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Может быть, один из них?

С уважением,

UPDATE

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
<style type="text/css">

button
{
 cursor: pointer;
 background-size: 100% 100%;
 background-color: transparent;
 background-position: center center;
 background-repeat: no-repeat;
 border: 0px;
 color: white;
 font-family: Arial;
}

button
{
 width: 337px;
 height: 94px;
 font-size: 50pt;
}
button.pink
{
 background-image: url(images/buttonpinknormal.png);
}
button.pink:active
{
 background-image: url(images/buttonbluepressed.png);
}

</style>
</head>
<body>

  <button class="pink"></button>

</body>
</html>

Это минимальный кусок кода, который не работает на Android. Работает в Mobile Safari, Safari, Chrome.

1 Ответ

1 голос
/ 27 марта 2012

: активный не работает в Android Webkit.Доказательства и многое другое: Как смоделировать: активный псевдо-класс CSS в Android на элементах без ссылок?

Спасибо Колину за идею теста.

ОБНОВЛЕНИЕ

Я пробовал следующие хаки.

  1. Заменить: активным с: hover.Не работаетЕсли вы нажмете кнопку, она станет нажата, но вы можете переместить палец в направлении z, в сторону от экрана, чтобы кнопка никогда не возвращалась в нормальное состояние.
  2. Замените элемент «button» на «a».Не работаетНе только трудно имитировать внешний вид кнопки, но и чувствовать, поскольку она вообще никогда не нажимается.

Кажется, что сенсорные события - единственный способ выполнить работу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...