IE performs rendering before requestAnimationFrame

Question

Div in the snippet below shouldn't become green after click, but it does in IE 11 and Edge.

Let's take a look at following situation: there is a black div.
When it is clicked, we call requestAnimationFrame and change color to green immediately.
In requestAnimationFrame collback we change color to red.

For for more visibility I've added a loop into requestAnimationFrame which creates a lag for 3 seconds. Also I've added a CSS animation to show where the lag is.

I expect following behavior (and see it in Chrome and Firefox):

There is a black div
click occurs
color is formally changed to green, but it's not rendered
Without rendering callback of requestAnimationFrame is called
Browser lags for 3 seconds with black div on the screen
div's color changes to red
Render occurs and red div is shown

However, IE11 and Edge on step 5 show green div. I think that such behavior is incorrect as browser must postpone re-render until requestAnimationFrame handler is executed.

How can I force IE/Edge to call the handler before render?

I can't prevent changes before requestAnimationFrame as in my actual code they are caused by a CSS animation. Also this problem occurs even in case of 2 recursive calls to 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; }
}

PS: Same question in Russian.

user_2838890 · Answer

Seems that the problem is under consideration on Edge

I thinks It's because IE doesn't executes requestAnimationFrame fast enough or it defers it a little, so it executes the div.style.background = 'green'; while other browsers don't.

I've a similar problem with requestAnimationFrame with IE and I thinks it's the same problem, check the fiddle with ie clicking the circle you see it going green a moment when other browsers don't do that.

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

var div = document.querySelector('div');

div.addEventListener('click', function () {
  div.style.background = 'green';
  requestAnimationFrame(function () {
    div.style.background = 'red';
  });
});

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

I use that solution to calculate width or height of elements with display: none; and after in the requestAnimationFrame rehide the element, and only on IE you can see a moment where the elements are visible.

IE performs rendering before requestAnimationFrame

1 Answers