Firefox HTML5 invalid form message bubble position

Question

I am having a simple HTML5 form field:

<input type="text" name="first" id="first" placeholder="first" required="required" value="">

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.

In Chrome, the message bubble behaves correctly and scrolls together with the document.

A search for "html5 firefox form validation message position" or similar did not produce any useful results.

Simple HTML:

<!doctype html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>HTML5 Form Test</title>
    </head>
    <body style="padding-top: 800px; padding-bottom: 200px;">
      <form style="margin: 0 auto;">
        <input type="text" name="first" id="first" placeholder="first" required="required" value="">
        <input type="submit" name="submit" value="test">
      </form>
    </body>
  </html>

This is the only solution that I found. [scrollIntoView](https://stackoverflow.com/questions/19814673/html5-input-required-scroll-to-input-with-fixed-navbar-on-submit) — user3597577, Oct 01 '18 at 22:26

score 1 · Answer 1 · answered Sep 25 '21 at 00:01

Not a complete solution. Can close each element at first time using the solution below. Look still its an Firefox open bug

 if(navigator.userAgent.toLowerCase().indexOf("firefox") > -1){
        $(document).ready(function(){
        $( "form" ).on('mouseleave', function(event) {
            var activeElement = $("*:focus");
            if(activeElement){
                setTimeout(function(){
                    var x = window.scrollX, y = window.scrollY;
                    activeElement.blur();
                    window.scrollTo(x, y);
                },1000);
                }
            });
        });
    }

score 0 · Answer 2 · answered Sep 27 '21 at 15:48

Updated one

    if(navigator.userAgent.toLowerCase().indexOf("firefox") > -1){ 

$("form input").on("invalid", function(event) {
        $( "form" ).on('mouseleave', function(event) {
            activeElement = document.activeElement;         
            setTimeout(function(){
                console.log(activeElement);
                var x = window.scrollX, y = window.scrollY;
                activeElement.blur();
                activeElement.focus();
                window.scrollTo(x, y);
                },2000);
            });
        });
    }

Firefox HTML5 invalid form message bubble position

2 Answers2