Webkit Validation Bubble Behaves Like It Has Fixed Position On Chrome

I have a form, where the first input is required:

Users must scroll to get to the

Solution 1:

It's the same for me in Fx 23.0, the document scrolls, the bubble stays. I guess this is because these elements are not part of the HTML document, but rather just overlays, and the developers maybe just didn't bother, forgot it, or it's a bug.

In Chrome it's probably a bug, because in Opera 15.x (based on Chromium) it's working as expected, the bubble correctly moves with the document, and in the current Chrome Canary build (31.0.1601.1) it moves as expected too, and once it would move out of the frame, the bubble fades away.

Solution 2:

we can use JQuery for to it

if ($.browser.mozilla) {
    document.querySelector( "form_id" )
    .addEventListener( "invalid", function( event ) {
        event.preventDefault();
    }, true );
 }