AngularJS Microsoft Edge-Bildschirm spiegelt nicht das DOM

Question

Ich benutze AngularJS 1.5.0 und Microsoft Edge Browser Bildschirm spiegelt nicht das DOM.

Ich hätte gerne einen Vorschlag, wie dies behoben werden kann.

Ich kann nicht wirklich eine Korrektur für jedes Element anwenden, da die Anwendung mit dynamischem Benutzerinhalt einschließlich Winkelgleichungen etwas groß ist. Auch die App enthält viele dynamische Bindungen mit Eingabefeldern verknüpft.

Wenn Sie den Text mit der Maus auswählen, wird die 0 zu einer 2, die im folgenden Beispiel der richtige Wert ist. Auch das Ändern des Positionsstils hin und her scheint Edge zu zwingen, das Element neu zu zeichnen, aber es ist ein hässlicher Fix, den ich nicht sehr mag und der an so vielen Stellen ausgelöst werden muss (Ajax-Anfrage, Eingabeänderungen usw.) ...)

Die Seite beginnt mit einem Wert von 0. Dann wird ein Ajax-Aufruf gemacht und es gehen die realen Daten holen. Nach einigen Experimenten erscheint der Fehler nur, wenn die neuen Daten 1 Zeichen lang sind (zB 2 oder 9). Und es passiert jedes Mal. Wenn es sich um eine 2-stellige Nummer (zB 26) handelt, erscheint die gute Nummer.

Jede Hilfe zu diesem Thema würde gerne gewürdigt werden.

Answer 1

Wir waren vor dem gleichen Problem, und es gestoppt auftritt, nachdem die text-transform: uppercase Stil aus den Elementen zu entfernen, die nicht aktualisieren.

@Sampson, es sieht aus wie ein Fehler in Edge.

Answer 2

konnte ich eine temporäre Lösung mit der Verwendung von Mutation Observer machen.

Kleines Skript, das ich gemacht habe, das für AngularJS Elemente arbeitet, schuf Serverseite.

Derzeit sind das die einzigen, die Probleme in meiner App verursachen.

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