iPhone iOS will not display box-shadow properly

The Design The contact form on a responsive design has input fields with both an inset shadow and regular outside shadow. See image below. The Code ``` input { background:#fff; height:auto; padding:8px 8px 7px; width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border:#fff solid 3px; border-radius:4px; box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, 0, .2); } ``` The Issue iOS v4+ does not display the box-shadow properly. See image below. Tested I have attempted using -webkit-box-shadow. ``` -webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, 0, .2); ``` I have applied `display:block;` to the input element. Current Workaround I would prefer not having to do this, but this is the only way I can get my desired effect. HTML ``` <p><input /></p> ``` CSS ``` p { width:50%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-shadow:0px 0px 5px rgba(0, 0, 0, .35); border-radius:4px; } input { background:#fff; height:auto; padding:8px 8px 7px; width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border:#fff solid 3px; border-radius:4px; box-shadow:inset 2px 2px 3px rgba(0, 0, 0, .2); } ``` Even with this workaround, the inset shadow on iOS is not rendered properly; but it's close enough. My Question Is it possible to have multiple instances of box-shadow on a single element render properly on iOS devices? If not, what about the inset shadow? Or am I using this property and its values incorrectly? Thanks in advance!