Webkit Validation Bubble behaves like it has fixed

问题:

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

<form>
    <input type="text" required>
    <input type="submit">
</form>

Users must scroll to get to the submit button:

input[type="submit"] {
    margin-top: 150%;
}

If I submit the form, without filling in the required field, then the viewport will scroll to the top, and I see the html5 validation bubble.

If I scroll back down again to where the the submit button is, then the validation bubble remains fixed in place. I'd expect it to disappear or move upwards with the field it's attached to.

This jsFiddle shows what I'm talking about.

What's going on here? Anyone seen this before? I'm seeing it on latest versions of Chrome and Chromium. It doesn't happen on FF because the bubble disappears as soon as you interact with the page.

回答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.

回答2:

we can use JQuery for to it

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