AngularJS binding + chrome re-draw bug: text not updating

Question

(I cannot reproduce in jsfiddle, and I cannot disclose my company website.)

This happens in several situations, and only in chrome (works fine on firefox)

Problem:

Sacred texts are not displayed until the page is redrawn .

Details:

I know that this is not an error in my code, because I see that the same variable binding works elsewhere on the page, and this change is displayed there.

eg.

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

more importantly

When I call the page to be redrawn (not a complete reload!), Then the displayed binding is “fixed” and the correct values ​​are displayed, i.e.

• selecting text with the mouse,
• or by resizing the window,
• or scroll

, , ajax.

, ng-cloak, .

: , - ?

Answer 1

ng-show, .

Chrome DOM ( Chromium) fixed static. , , CSS . , , .

Chrome .ng-hide , DOM, height width 0px , CSS javascript. Dev Tools ​​ :

min-height: 100px;
height: 0px

:

• CSS: relative , . , , position. .

• JS/CSS: position absolute , Angular . Chrome . , -, absolute. , .

  $scope.getValue = function () {
  
    // ...
  
    $('.selector').css({position: 'absolute'}); // Assumes jQuery
  
    return $scope.someValue;
  }());
  

Angular, / , (, {{ getSomeValue() }}). .

Chromium. . .