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

发布时间：2020-12-17 16:58:12 所属栏目：安全来源：网络整理

导读：(我无法在jsfiddle中复制,我无法透露我公司的网站.) 它发生在少数情况下,只在chrome中(在firefox上运行正常) 问题：在重新绘制页面之前,不会显示带衬料的文本. 细节：我知道这不是我的代码中的错误,因为我可以看到相同的变量绑定在页面的其他地方工作,并且

(我无法在jsfiddle中复制,我无法透露我公司的网站.)

它发生在少数情况下,只在chrome中(在firefox上运行正常)

问题：

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

细节：

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

例如

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

更重要的是,

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

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

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

当我有ng-cloak指令时,我已经看到了更多这个bug,但我删除了所有这些.

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

解决方法

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

在某些情况下,Chrome不会对固定或静态定位元素执行DOM操作(Chromium).这不是重绘的问题,但是使用重排,因为循环CSS动画并不会阻止它.当堆很小时似乎没有发生.

Chrome尽可能地从标记中删除.ng-hide类,并且该元素实际上在DOM中可见,但无论您使用CSS或javascript做什么,它的高度和宽度都是0px.在Dev Tools中的计算样式中,你会发现这样的废话：

min-height: 100px;
height: 0px

以下是我能够阻止它的两种方法：

> CSS：对包含指令或插值的元素使用相对定位.如果只是将元素包装在具有所需位置属性的容器中,它通常不起作用.这带来了严重的布局限制.
> JS / CSS：每次Angular检索绑定值时,将容器元素或指令的position属性设置为绝对值.这会迫使Chrome重排元素.它似乎不适用于绝对以外的任何东西.我不知道为什么.

$scope.getValue = function () {

  // ...

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

  return $scope.someValue;
}());

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!