AngularJS Microsoft Edge Screen 未反映 DOM

Question

我正在使用 AngularJS 1.5.0 并且 Microsoft Edge 浏览器屏幕未反映 DOM。

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

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

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

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

如有任何帮助，我们将不胜感激。

Answer 1

我能够使用 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>

Answer 2

我们遇到了同样的问题，在从未更新的元素中删除 text-transform: uppercase 样式后问题不再发生。

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

AngularJS Microsoft Edge Screen 未反映 DOM

AngularJS Microsoft Edge Screen doesn't reflect the DOM

angularjs

microsoft-edge