iOS WebView Not Releasing

Question

I am designing an HTML page optimized for iOS that utilizes css. When the user taps the button, it is supposed to fade out and then fade back in. However, it does not fade back in, the opacity stays at 50%.

Here is the CSS that I am using:

.increaseFont{
        opacity:1.0;
}
.decreaseFont{
        opacity:1.0;
}
.increaseFont:hover{
    opacity:0.5;
}
.decreaseFont:hover{
    opacity:0.5;
}

Before Tap:

After Tap:

Any ideas on why this occurs?

Answer 1

:hover probably isn't what you're looking for on a touch screen... I would try :active instead, or one of the other psuedo classes.

Answer 2

So if I understand when the user puts the their finger effectively touching down the button it should change to the fade and then when the user releases the finger it should go back to an opacity of 1 but instead it stays at .5.

If this is the case this has to do with an issue with lack of events for a touch device. What is happening is that when you click it it stays in the hover state. If you go to click somewhere else in the web view then you would see it change back to the opacity of 1. In order to do something like this with a touch device though you will need to use javascript and watch for the down and up event as touch devices trigger this.

Another suggestion that you might receive is to use the :active instead of :hover however you will see a similar if not worse results. So that is why this is happening. As for how to solve this problem. You can use the touchstart and touchend event which are events that you can listen for in javascript that are triggered when touches occur. Here is a JSFiddle example.

http://jsfiddle.net/E3dNN/2/

Which essentially has the following javascript code

document.getElementById('box').addEventListener('touchstart', function () {
    $('#elementID').css('opacity', '0.5');
});
document.getElementById('box').addEventListener('touchend', function () {
    $('#elementID').css('opacity', '1');
});

In the new CSS specs that are coming something like this will be handled in CSS but that will not be for a while.

Also here is a blog post that talks about this as well.

Good luck.