Webkit Validation Bubble的行为就像在Chrome上具有固定位置一样 [英] Webkit Validation Bubble behaves like it has fixed position on Chrome

问题描述

我有一个表单，需要第一个输入：

 < form> 
< input type =textrequired> 
< input type =submit> 
< / form> 
  

用户必须滚动才能进入提交按钮：

  input [type =submit] {
 margin-top：150％; 
} 
  

如果我提交表单而不填写必填字段，那么视口将滚动到顶部，并且我看到html5验证泡泡。

如果我再次向下滚动到提交按钮的位置，则验证泡泡会保持固定地点。我希望它会消失或向上移动它的附加字段。

=nofollow> jsFiddle 显示我在说什么。

这是怎么回事？任何人见过这个？我在最新版本的Chrome和Chromium上看到了它。它不会发生在FF上，因为只要您与页面交互就会消失。

在Fx 23.0中，文档滚动，泡泡停留。我想这是因为这些元素不是HTML文档的一部分，而只是重叠，开发人员可能没有打扰，忘记它，或者它是一个bug。

在Chrome中它可能是一个错误，因为在Opera 15.x中（基于Chromium）它可以按预期工作，泡泡会随着文档正确移动，并且在当前的Chrome Canary版本（31.0.1601.1）中，它会按预期移动一旦它移出框架，泡沫消失。

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.

解决方案

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.

这篇关于Webkit Validation Bubble的行为就像在Chrome上具有固定位置一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！