AngularJS Microsoft Edge Screen nie odzwierciedla DOM

Question

Używam ekranu przeglądarki AngularJS 1.5.0 i Microsoft Edge nie odzwierciedla DOM.

Chciałbym sugestii, jak to naprawić.

Naprawdę nie mogę zastosować poprawki dla każdego elementu, ponieważ aplikacja jest dość duża z dynamiczną zawartością użytkownika, w tym równania kątowe. Aplikacja zawiera również wiele powiązań dynamicznych powiązanych z polami wprowadzania danych.

Wybierając tekst za pomocą myszy, zamień wartość 0 na 2, która jest właściwą wartością w poniższym przykładzie. Zmiana stylu pozycji tam iz powrotem wydaje się zmuszać Edge'a do przerysowania elementu, ale jest to nieco brzydka poprawka, której bardzo nie lubię i która musi być wyzwalana w tak wielu miejscach (żądanie Ajax, wprowadzanie zmian itd. ...)

Początek strony o wartości 0. Następnie wywoływane jest połączenie Ajax i następuje pobieranie rzeczywistych danych. Po kilku eksperymentach błąd pojawia się tylko wtedy, gdy nowe dane to 1 znak (np. 2 lub 9). I to się dzieje za każdym razem. Jeśli jest to 2-cyfrowy numer (np. 26), wówczas pojawia się dobry numer.

Każda pomoc w tej sprawie byłaby mile widziana.

Answer 1

Byliśmy stoi ten sam problem i to przestało występujące po usunięciu stylu text-transform: uppercase z elementów, które nie są uaktualniane.

@Sampson, wygląda na to, że jest to błąd w Edge.

Answer 2

udało mi się zrobić tymczasową poprawkę z wykorzystaniem mutacji Observer.

Mały skrypt, który wykonałem dla elementów AngularJS, powstał po stronie serwera.

Obecnie tylko one powodują problemy w mojej aplikacji.

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