IE выполняет requestAnimationFrame после отрисовки, а не до

В IE11 и Edge div в сниппете после клика становится зелёным, хотя не должен.

Рассмотрим следующую ситуацию: есть div чёрного цвета.
При клике по нему мы запрашиваем requestAnimationFrame и меняем цвет на зелёный.
В коллбеке requestAnimationFrame меняем цвет на красный.

Для наглядности в requestAnimationFrame добавлен цикл, вешающий браузер на 3 секунды, а на div повешена css-анимация, чтобы было ясно, что браузер повис.

Ожидаемое поведение (которое наблюдается в Chrome и Firefox):

1. Есть черный div
2. Происходит click
3. Цвет формально меняется на зелёный, но перерисовки нет
4. Без перерисовки вызывается коллбек requestAnimationFrame
5. Браузер зависает на 3 секунды с чёрным div'ом на экране
6. Цвет div'а меняется на красный
7. Происходи перерисовка c красным div'ом

Однако, IE и Edge на шаге 5 показывают зелёный div. Насколько я понимаю, такое поведение некорректно, поскольку браузер обязан дождаться выполнения кода из requestAnimationFrame и только потом выполнить отрисовку на экране.

Как сделать, чтобы промежуточное состояние не отрисовывалось?

Вариант не изменять состояние без requestAnimationFrame не подходит, поскольку в реальной задаче (см. вопрос о canvas'е) эти изменения вызваны css-анимацией, а не скриптом. Кроме того, проблема проявляется даже при двух вложенных requestAnimationFrame.

https://jsfiddle.net/8Ljn14ee/2/

var div = document.querySelector('div'); 
 
div.addEventListener('click', function () { 
  requestAnimationFrame(function () { 
    var t = new Date; 
    t.setSeconds(t.getSeconds() + 3); 
    while (new Date < t); 
    div.style.background = 'red'; 
  }); 
 
  div.style.background = 'green'; 
});

div { 
  height: 200px; 
  width: 200px; 
  border-radius: 50%; 
  background: black; 
  animation: w-100-200 3s linear infinite; 
} 
 
@keyframes w-100-200 { 
    0% { width: 200px; } 
   50% { width: 400px; } 
  100% { width: 200px; } 
}

<div></div>

PS: Этот вопрос на английском.