jquery - Chrome 中最奇怪的错误，与重绘有关？

Question

我有一个表单，其中包含一些默认情况下隐藏的错误。这是 CSS(手写笔):

span.error
  display: none
  position: relative
  padding: .25em .5em
  width: 75%
  margin-top: 5px
  margin-bottom: 15px
  float: right
  text-align: center
  background: myorange
  border-radius: radius
  &:after
    arrow(6px)
    top: -12px
    left: 50%
    margin-left: -12px
    border-bottom-color: myorange

然后在 jQuery 中我想在 AJAX 回调中显示错误，所以:

$form.submit(function(e) {
  e.preventDefault();

  $.post($form.attr('action'), $form.serialize(), function(data) {
    // handle ajax then show errors
    $('.error').show(); // doesn't work properly here, only 2 show up
  });
});

我遇到的问题很奇怪。我有 6 个错误，但只有 2 个出现在 Chrome 中。我尝试过的所有其他浏览器都可以正常工作。如果我打开和关闭 devtools 或放大和缩小一秒钟，然后错误会按预期显示。

我发现如果我将 $('.errors').show() 放在 submit 事件中，它就会工作正如预期的那样，所有 6 个错误都出现了。

$('.error').show(); //works here

$form.submit(function(e) {
  e.preventDefault();
  ...
});

我还发现，如果我删除 float:right，那么在 Chrome 中一切正常，但我显然需要这个属性。我尝试使用 some 触发重绘solutions我 found ，但到目前为止还没有运气。被困了几个小时......关于如何解决这个问题有什么想法吗？

Answer 1

于是我找到了解决办法。事实证明，如果我 float 所有元素，包括标签和输入，那么当错误 float 时它也能正常工作，否则，如果它周围没有其他 float ，那么它就不会除非您通过调整窗口大小或放大和缩小等方式触发重排，否则请刷新。

最奇怪的是，它在提交处理程序外部 工作正常，但在内部却不行，这让我发疯，但无论如何我现在都可以使用 float 了。我确定这一定是一个错误，因为它甚至可以在 IE 中运行，但我无法在 fiddle 上重现它...