title: Firefox HTML5 invalid form message bubble position
body: <p>I am having a simple HTML5 form field:</p>
  
  <pre><code>&lt;input type="text" name="first" id="first" placeholder="first" required="required" value=""&gt;
  </code></pre>
  
  <p>If the submit is invalid (empty), the message bubble appears as expected. But when I scroll to the form field position with the mouse scroll wheel and do not change focus, the bubble stays fixed and does not scroll with the document.</p>
  
  <p>In Chrome, the message bubble behaves correctly and scrolls together with the document.</p>
  
  <p>A search for "html5 firefox form validation message position" or similar did not produce any useful results.</p>
  
  <p>Simple HTML:</p>
  
  <pre><code>&lt;!doctype html&gt;
    &lt;html&gt;
      &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;HTML5 Form Test&lt;/title&gt;
      &lt;/head&gt;
      &lt;body style="padding-top: 800px; padding-bottom: 200px;"&gt;
        &lt;form style="margin: 0 auto;"&gt;
          &lt;input type="text" name="first" id="first" placeholder="first" required="required" value=""&gt;
          &lt;input type="submit" name="submit" value="test"&gt;
        &lt;/form&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/UtGHG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UtGHG.png" alt="enter image description here"></a></p>