Question

（我无法在jsfiddle中复制，我无法透露我公司的网站。）

它发生在少数情况下，仅在chrome中（在firefox上正常工作）

问题：

在页面重新绘制之前，不会显示带衬料的文本。

详细信息：

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

e.g。

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

更重要的是，

当我导致页面重绘（不是完全重新加载！）时，显示的绑定是＆＃34;固定＆＃34;并显示正确的值，即

用鼠标选择文字，
或通过调整窗口大小，
或滚动，

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

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

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

Answer 1

就我而言，问题出在ng-show，所以我的回答反映了这一点。

在某些情况下，Chrome不会在fixed或static定位元素上执行DOM操作（Chromium）。这不是重绘的问题，但是使用重排，因为循环CSS动画并不会阻止它。当堆很小时似乎没有发生。

Chrome会从标记中尽职地删除.ng-hide类，而元素实际上在DOM中可见，但其height和width为{ {1}}无论你使用CSS或javascript做什么。在Dev Tools中的计算样式中，你会发现这样的废话：

0px
min-height: 100px;

我有两种方法可以阻止它：

CSS：对包含指令或插值的元素使用height: 0px定位。如果只是将元素包装在具有所需relative属性的容器中，它通常不起作用。这会造成严重的布局限制。
JS / CSS：每次Angular检索绑定值时，将容器元素或指令的position属性设置为position。这会迫使Chrome重排元素。它似乎不适用于absolute以外的任何其他内容。我不明白为什么。
```
absolute
```

要在Angular中使用第二个选项，您需要插入/绑定函数而不是值（，例如， $scope.getValue = function () { // ... $('.selector').css({position: 'absolute'}); // Assumes jQuery return $scope.someValue; }());）。在该函数中，您可以调用上面的代码。

我会考虑向Chromium团队提交一个错误。因为这很奇怪。而且很烦人。

AngularJS绑定+ chrome重绘错误：文本未刷新

1 个答案: