title: iPhone iOS will not display box-shadow properly
body: <h1>The Design</h1>
  
  <p>The contact form on a responsive design has input fields with both an inset shadow and regular outside shadow. See image below.</p>
  
  <p><img src="https://i.stack.imgur.com/agYKJ.jpg" alt="Input Field Design on Mobile"></p>
  
  <hr>
  
  <h1>The Code</h1>
  
  <pre><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);
  }
  </code></pre>
  
  <hr>
  
  <h1>The Issue</h1>
  
  <p>iOS v4+ does not display the box-shadow properly. See image below.</p>
  
  <p><img src="https://i.stack.imgur.com/Gj6pN.jpg" alt="Input box-shadow rendered incorrectly"></p>
  
  <hr>
  
  <h1>Tested</h1>
  
  <p>I have attempted using -webkit-box-shadow.</p>
  
  <pre><code>-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25),
                     inset 2px 2px 3px rgba(0, 0, 0, .2);
  </code></pre>
  
  <p>I have applied <code>display:block;</code> to the input element.</p>
  
  <hr>
  
  <h1>Current Workaround</h1>
  
  <p>I would prefer not having to do this, but this is the only way I can get my desired effect.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;p&gt;&lt;input /&gt;&lt;/p&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>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);
      }
  </code></pre>
  
  <p>Even with this workaround, the inset shadow on iOS is not rendered properly; but it's close enough.</p>
  
  <hr>
  
  <h1>My Question</h1>
  
  <p>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?</p>
  
  <p><strong>Thanks in advance!</strong></p>