Home/ Questions/Q 7714931
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T02:15:31+00:00

I’m porting a web-app from iPhone to Android. Unexpectedly, buttons work as usual, except

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    :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.

    1. 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.
    2. 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.

    • 0