Button doesn't get redrawn, when in active state (Android Webkit)

Question

I'm porting a web-app from iPhone to Android. Unexpectedly, buttons work as usual, except they don't change background in active state. In Mobile Safari, desktop Chrome everything is OK. Any ideas, what can be a problem?

I have a lot of tricks like

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

Maybe one of them?

Regards,

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>

This is minimal piece of code, which doesn't work on Android. It works in Mobile Safari, Safari, Chrome.

This answer may helps you: http://stackoverflow.com/a/7820424/458679 — trkaplan, Mar 26 '12 at 08:26
Does the button show the images/buttonpinknormal.png image in the non-active state? This validates the path to the images. Have you tried to put in a "display:none" in the body of the button.pink:active definition to see test that the selector is firing? — Colin, Mar 27 '12 at 11:29
1. Yes. 2. Will try (visibility:hidden instead, as it seems to be better for the test) then answer. — noober, Mar 27 '12 at 12:52
When pressed, the button doesn't disappear. It looks like :active state is never being triggered. — noober, Mar 27 '12 at 13:00

score 1 · Accepted Answer · edited May 23 '17 at 12:27

:active doesn't work in Android Webkit. Proof and more: How to simulate :active css pseudo class in android on non-link elements?

Thanks to Colin for the idea of the test.

UPDATE

I've tried the following hacks.

Replace :active with :hover. Doesn't work. If you tap the button it becomes pressed, but you can move your finger in z-direction, away from screen, so the button never returns to normal state.
Replace 'button' element with 'a'. Doesn't work. Not only hard to emulate button look, but also feel, as it never becomes pressed at all.

It seems like touch events are the only way to get the job done.

Button doesn't get redrawn, when in active state (Android Webkit)

1 Answers1