CSS-переходы на сенсорных устройствах не возвращаются в нормальное состояние

Question

У меня есть несколько кнопок, которые имеют CSS-переход от черного к желтому при наведении, а затем возвращаются обратно к черному. При нажатии они делают вызов AJAX. Они прекрасно работают, когда я нахожу на них курсор мыши и щелкаю мышью во всех браузерах рабочего стола (естественно, IE9 и более низкие игнорируют его), но как в iOS Safari, так и в стандартном браузере Android переход остается желтым после того, как я нажму кнопку. Они не возвращаются в нормальное черное состояние, как в настольной системе.

Любые подсказки относительно того, где я ошибся, будут с благодарностью. Для тех, у кого есть сенсорное устройство, эта скрипка демонстрирует проблему - http://jsfiddle.net/wpyz9whn/1/

CSS

a.button {
    background-color: #000000;
    color: #FFFFFF;
    border: none;
    text-decoration: none;
    padding: 0px 10px;
    display: block;
    line-height: 24px;
    font-weight: 700;
    text-align: center;
    transition: background 0.8s ease-out;
    -moz-transition: background 0.8s ease-out;
    -webkit-transition: background 0.8s ease-out;
    text-transform: uppercase;
    -webkit-appearance: none;
}
a.button:hover {
    background: #ffcc00;
    color: #000;
    transition: background 0.2s ease-in;
    -moz-transition: background 0.2s ease-in;
    -webkit-transition: background 0.2s ease-in;
}
a.button:active {
    background: #ff9c00;
    transition: background 0s ease-in;
    -moz-transition: background 0s ease-in;
    -webkit-transition: background 0s ease-in;
}
a.button:focus {
    outline: none;
}

HTML

<a class="button" onclick="return addToBasket(11628937,'/')">Add to Basket</a>