Question

我有一个表单，其中包含一些默认隐藏的错误。这是CSS（Stylus）：

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() 置于<{1}}事件之外，那么它会按预期运行，并显示所有6个错误。

submit

我还发现，如果我删除$('.error').show(); //works here $form.submit(function(e) { e.preventDefault(); ... });，那么Chrome中的一切正常，但我显然需要这个属性。我尝试使用some solutions我found触发重拍，但到目前为止没有运气。被困了好几个小时......关于如何解决这个问题的想法？

Answer 1

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

最奇怪的是，它在外面提交处理程序就好了，但不在里面，这就是让我发疯的原因，但我现在全都使用了浮点数。我确定这必须是一个bug，因为它甚至可以在IE中运行，但我无法在小提琴上重现它......

Chrome中最怪异的bug，与重绘有关吗？

1 个答案: