title: Weird box-shadow artifacts in webkit
body: <p>Anyone have any idea what could be causing the blue box to the right of the input field?</p>
  <p>It's been the bane of my existence the past few days. Only appears intermittently. The markup for each input is like so:</p>
  <pre><code>&lt;div class=&quot;input text&quot;&gt;
      &lt;label for=&quot;pass&quot;&gt;Password&lt;/label&gt;
      &lt;input type=&quot;password&quot; name=&quot;pass&quot; id=&quot;pass&quot; class=&quot;required&quot;  tabindex=&quot;30&quot;/&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Things to note are that the label is positioned on top of the field and then dimmed/faded out when clicked/typed on.</p>
  <p>This only happens on webkit on Mac and apparently Vista.</p>
  <p><a href="https://i.stack.imgur.com/5BQcv.jpg" rel="nofollow noreferrer">http://i.stack.imgur.com/5BQcv.jpg</a></p>
  <p>EDIT: Sorry, the CSS:</p>
  <pre><code>input[type=&quot;text&quot;], input[type=&quot;password&quot;] { 
              height: 30px;
              outline: none;
              -webkit-transition: -webkit-box-shadow 0.3s linear;
              -moz-transition: -moz-box-shadow 0.3s linear;
              transition: box-shadow 0.3s linear;
          }
  
          .input.text input[type=&quot;text&quot;]:focus, input[type=&quot;text&quot;]:active, .input.text input[type=&quot;password&quot;]:focus, input[type=&quot;password&quot;]:active {
              -moz-box-shadow: 0 0 12px #82cce8;
              -webkit-box-shadow: 0 0 12px #82cce8; /* chrome seems to show a smaller box shadow */
              box-shadow: 0 0 12px #82cce8;
          }
  
          .input.text input, .input.text span.field {
              padding: 10px 15px;
              width: 92%;
              font-size: 2em;
              font-family: 'HelveticaNeueW01-45Ligh', Arial, Helvetica, sans-serif;
              border: 1px solid #cecece;
              -webkit-border-radius: 3px;
              -moz-border-radius: 3px;
              border-radius: 3px;
              -webkit-box-shadow: -2px -2px 3px rgba(205,205,205, 0.3);
              -moz-box-shadow: -2px -2px 3px rgba(205,205,205, 0.3);
              box-shadow: -2px -2px 3px rgba(205,205,205, 0.3);
          }
              input::-webkit-input-placeholder { color: #e2e2e2;}
              input:-moz-placeholder { color: #e2e2e2;}
  </code></pre>
  <p>The containing div just has a padding of 20px.</p>
  <p>Also, sorry sdleihssirc, had to re-link image due to edit.</p>