title: iOS Safari: Default validation bubble messages are not properly aligned
body: <p>We're using HTML5 form validation without overwriting the default system UI for the validation error messages. This is working fine everywhere but on iOS Safari, where the validation messages are not aligned properly inside the bubble popup. We have tested this on two completely separate devices and with different forms. Even a minimal form with no CSS has the same result:</p>
  
  <p><a href="https://jsfiddle.net/GinSan/48hnrf92/1/" rel="noreferrer">https://jsfiddle.net/GinSan/48hnrf92/1/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
    &lt;label for="test"&gt;Test field&lt;/label&gt;
    &lt;input required id="test" name="test" type="text"&gt;
    &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is what the validation message looks like on the iOS devices we tested:</p>
  
  <p><a href="https://i.stack.imgur.com/aNWnT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/aNWnT.png" alt="validation message in English on iPhone"></a></p>
  
  <p><a href="https://i.stack.imgur.com/Mgghh.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Mgghh.jpg" alt="validation message in German on iPad"></a></p>
  
  <p>The validation message is aligned to the top instead of centered, even though this is a system UI element. Is this a known problem? Is there anything that can be done about it, except reporting it to apple and waiting for a fix, or replacing the system validation messages?</p>