AngularJS Microsoft Edge 屏幕不反映 DOM答案

【问题标题】：AngularJS Microsoft Edge Screen doesn't reflect the DOMAngularJS Microsoft Edge 屏幕不反映 DOM
【发布时间】：2016-04-07 23:23:39
【问题描述】：

我使用的是 AngularJS 1.5.0，而 Microsoft Edge 浏览器屏幕不反映 DOM。

我想要一些建议如何解决这个问题。

我不能真正为每个元素应用修复程序，因为应用程序有点大，包含 Angular 方程等动态用户内容。该应用程序还包括许多链接到输入框的动态绑定。

用鼠标选择文本将 0 变为 2，这是下面示例中的正确值。同样来回更改位置样式似乎会迫使 Edge 重新绘制元素，但这有点丑陋，我不太喜欢它，它需要在很多地方触发（Ajax 请求、输入更改等等。 ..)

页面以 0 值开始。然后进行 Ajax 调用并获取真实数据。经过一些实验后，该错误仅在新数据为 1 个字符（例如：2 或 9）时才会出现。而且每次都会发生。如果是 2 位数字（例如：26），则显示正确的数字。

我们将不胜感激。

【问题讨论】：

我听说过这样的问题；这个页面在线可以直接访问吗？我在 Microsoft Edge 团队工作，很想仔细看看。您可以尝试的一件事是在值更改后强制重新绘制元素。有很多方法可以做到这一点——例如，您可以尝试在元素上设置 background: auto。
@Sampson。我通过推特私信联系你，给你网址、用户名和密码
@Sampson 对此有何更新？由于此错误，我们的应用程序的某些部分似乎已损坏，我们的一位客户计划很快更新到 Microsoft Edge...
@Sampson 我制作了小页面，您可以在其中重现错误。 test.veikus.com
找到解决办法了吗？

标签： angularjs microsoft-edge

【解决方案1】：

我们遇到了同样的问题，在从未更新的元素中删除 text-transform: uppercase 样式后它就停止了。

@Sampson，看起来这是 Edge 中的错误。

【讨论】：

我认为这里的问题可能是第一个状态和第二个状态具有相同的尺寸，因此浏览器认为它不需要更新。例如，尝试将后一种状态乘以 10（产生具有更多位数的数字）。我很好奇这是否也能解决问题。
@Sampson 是的，确实如此。我们还绑定到数字，当数字的数量发生变化时，它会更新。
我也有。就我而言，关闭text-transform: uppercase 也解决了这个问题。
EDGE 应该缓慢而痛苦地死去！
根据 EDGE 问题跟踪器，此问题现已修复：developer.microsoft.com/en-us/microsoft-edge/platform/issues/… - 尚不清楚它是在公共版本中修复还是仅在内部版本中修复。

【解决方案2】：

我能够使用 Mutation Observer 进行临时修复。

我制作的适用于 AngularJS 元素的小脚本在服务器端创建。

目前，这些是在我的应用程序中造成问题的唯一一个。

<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>

【讨论】：