AngularJS Microsoft Edge Screen не отражает DOM

Я использую AngularJS 1.5.0, а экран браузера Microsoft Edge не отражает DOM.

Я хотел бы предложить какое-то предложение, как это можно исправить.

Я не могу применить исправление для каждого элемента, так как приложение несколько велико с динамическим содержимым пользователя, включая уравнения Angular. Также приложение включает в себя множество динамических привязок, связанных с полями ввода.

Выбор текста с помощью мыши превратит 0 в 2, что является правильным значением в приведенном ниже примере. Кроме того, изменение стиля позиции назад и вперед, похоже, вынуждает Edge перерисовывать элемент, но это несколько уродливое исправление, которое мне не очень нравится, и оно должно запускаться во многих местах (запрос Ajax, изменения ввода и так далее...)

Начальная страница начинается со значения 0. Затем выполняется вызов Ajax и выполняется выборка реальных данных. После некоторых экспериментов ошибка появляется только в том случае, если новые данные имеют 1 символ (например: 2 или 9). И это происходит каждый раз. Если это двузначное число (например: 26), появляется хорошее число.

Любая помощь по этому вопросу была бы с удовольствием оценена.

Ответы

Ответ 1

Мы столкнулись с одной и той же проблемой, и она прекратилась после удаления стиля text-transform: uppercase из элементов, которые не обновляются.

@Sampson, похоже, что это ошибка в Edge.

Ответ 2

Я смог сделать временное исправление с использованием Mutation Observer.

Маленький script, который я сделал, что работает для элементов 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>