AngularJS 绑定(bind) + chrome 重绘错误 : text is not refreshed

Question

(我无法在 jsfiddle 中复制，也无法透露我公司的网站。)

它发生在少数情况下，并且仅在 chrome 中发生(在 Firefox 上运行良好)

问题:

在页面为 之前不会显示绑定(bind)的文本重绘 .

详情:

我知道这不是我的代码中的错误，因为我可以看到相同的变量绑定(bind)在页面的其他地方工作，并且在那里可以看到更改。

例如

<div something-unknown>
  1. {{ my.var }}    <!--  won't redraw -->
</div>
...
test case:
  2. {{ my.var }}     <!-- works ok -->

更重要的是，

当我导致页面重绘(不是完全重新加载!)时，显示的绑定(bind)是“固定的”并显示正确的值，即

通过鼠标选择文本，

或通过调整窗口大小，

或滚动，

我怀疑这个错误与从 ajax 调用返回的值有关。

当我有 ng-cloak 指令时，我看到了更多这个错误，但我删除了所有这些。

问题是:
这是一个已知的错误，还是与特定代码有关？

Answer 1

就我而言，问题在于 ng-show ，所以我的回答反射(reflect)了这一点。

在某些情况下，Chrome 不会在 fixed 上执行 DOM 操作(Chromium 也是如此)。或 static定位元素。这不是重绘的问题，而是回流的问题，因为循环 CSS 动画并不能阻止它。当堆很小时，它似乎不会发生。

Chrome 尽职尽责地删除了 .ng-hide标记中的类，并且该元素实际上在 DOM 中可见，但它的 height和 width是 0px无论您使用 CSS 或 javascript 做什么。在开发工具的计算样式中，你会发现这样的废话:

min-height: 100px;
height: 0px

以下是我能够防止它的两种方法:

CSS:使用 relative包含指令或内插值的元素的定位。如果您只是将元素包装在具有所需 position 的容器中，通常不会起作用。属性(property)。这强加了严重的布局限制。

JS/CSS:设置position absolute 的容器元素或指令的属性每次 Angular 检索绑定(bind)值时。这会强制 Chrome 重新排列元素。它似乎不适用于 absolute 以外的任何东西。 .我不知道为什么。

$scope.getValue = function () {

  // ...

  $('.selector').css({position: 'absolute'}); // Assumes jQuery

  return $scope.someValue;
}());

要在 Angular 中使用第二个选项，您需要插入/绑定(bind)一个函数而不是一个值(例如，{{ getSomeValue() }})。在该函数中，您可以调用上面的代码。

我会考虑向 Chromium 团队提交错误。因为这很奇怪。并且令人恼火。