iPad上的div盒影

Question

I am currently developing a touch optimized web app. Part of the concept design includes ease of navigation, so i have designed some nice looking div's that have a 'click' or 'touch' event that look pretty when you touch it.

This works great on a computer web browser and an android browser, but when I use it on Safari on an iPad it does not display a shadow. All my syntax seems right so all i can conclude is that it is a bug or not supported.

My question is: Has anyone come across this issue and discovered a fix or work around?

jsFiddle

CSS:

div.touch-button:active {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

div.touch-button {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Answer 1

You should use box shadow before -moz-box-shadow and -webkit-box-shadow. This solved the same issue for me in the past.

div.touch-button {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;    
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Answer 2

Use -webkit-appearance: none; for overriding default, try this..

div.touch-button {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    -webkit-appearance: none;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

div.touch-button:active {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    -webkit-appearance: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

Answer 3

Ok, After a lot of stress and messing around, and giving up. I came across the issue whilst trying to resolve another issue.

It was related to the viewport settings.

NOT CORRECT: <meta name="viewport" content="width=device-width" />

CORRECT: <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />