AngularJS Microsoft Edge Screen doesn't reflect the DOM

Question

I'm using AngularJS 1.5.0 and Microsoft Edge browser screen doesn't reflect the DOM.

I would like some suggestion how this can be fixed.

I can't really apply a fix for each element as the application is somewhat big with dynamic user content including Angular equations. Also the app include a lot of dynamic bindings linked to input boxes.

Selecting the text with the mouse turn the 0 into a 2 which is the right value in the example below. Also changing the position style back and forth seem to force Edge to redraw the element but it's somewhat an ugly fix that I don't like very much and it need to be trigger at so many places (Ajax request, input changes and so on...)

The page start with a value of 0. Then an Ajax call is made and it go fetch the real data. After some experimentation the bug only appears if the new data is 1 character (ex: 2 or 9). And it happens every time. If it's a 2 digit number (ex: 26) then the good number appears.

Any help on this matter would be gladly appreciated.

Answer 1

We were facing the same problem and it stopped occurring after removing the text-transform: uppercase style from the elements that are not updating.

@Sampson, it looks like this is a bug in Edge.

Answer 2

I was able to make a temporary fix with the use of Mutation Observer.

Little script that I made that works for AngularJS elements created server side.

Currently those are the only one causing trouble in my app.

<script>    
$(document).ready(function(){
  var ua = navigator.userAgent;
  var re  = new RegExp("Edge/");
  if (re.exec(ua) != null){
    console.log('edgeMutationObserver ON!!')
    var edgeMutationConfig = { characterData: true, subtree: true };
    var edgeMutationObserver = new MutationObserver(function(mutations) {
      var rgb_p = /rgb\((\d+), (\d+), (\d+)\)/g;
      var rgba_p = /rgba\((\d+), (\d+), (\d+), (\d.?\d*)\)/g;

      mutations.forEach(function(mutation){
        if(mutation.target.nodeType == 3){
          var that = mutation.target.parentNode;
          // Save the background color
          var bgc = that.style.backgroundColor;

          // Get applied style from style or css
          var bgc_css = bgc || $(that).css('backgroundColor');
          var bgc_temp,match;
          if(match = rgb_p.exec(bgc_css)){
            // rgb transformed in rgba triggers update
            bgc_temp = 'rgba('+match[1]+','+match[2]+','+match[3]+',1)';
          }else if(match = rgba_p.exec(bgc_css)){
            // Slightly modify transparency
            var alpha = match[4] == 0 ? 0.01 : match[4] - 0.01 ;
            bgc_temp = 'rgba('+match[1]+','+match[2]+','+match[3]+','+alpha+')'; 
          }else{
            // If either inline style or css is already equal to transparent the redraw is not made so i choose an alternate color with 0 opacity
            bgc_temp = bgc_css != 'transparent' ? 'transparent' : 'rgba(0,0,0,0)'; 
          }

          // Change background color to force redraw
          that.style.backgroundColor = bgc_temp;
          setTimeout(function(){
            // Apply back previous style
            // Doesn't redraw without a timeout in Edge
            that.style.backgroundColor = bgc;
          },0);
        }
      });
    });

    $('.ng-binding').each(function(){
      edgeMutationObserver.observe(this, edgeMutationConfig);
    });
  }
});
</script>