IE在requestAnimationFrame之前执行渲染

问题描述

下面的代码段中的Div不应该在点击后变为绿色，但它在IE 11和Edge中会变为绿色。

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

让我们来看看下面的情况：有一个黑色 div 。

点击它后，我们调用 requestAnimationFrame 并立即将颜色更改为绿色。

在 requestAnimationFrame collback中，我们将颜色更改为红色。

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.

为了获得更多的可见性，我在 requestAnimationFrame 中添加了一个循环，这会产生3秒的延迟。我还添加了一个CSS动画来显示滞后的位置。

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.

我希望以下行为（并在Chrome和Firefox中看到它）：

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

1. 有一个黑色 div


2. 单击发生


3. 颜色正式更改为绿色，但未呈现


4. 不呈现<$ c的回调$ c> requestAnimationFrame 被调用


5. 浏览器滞后3秒，黑色 div 在屏幕上


6. div 的颜色变为红色


7. 渲染发生并且显示红色 div

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

然而，IE11和第5步的Edge显示绿色 div。我认为这种行为是不正确的，因为浏览器必须推迟重新呈现，直到执行 requestAnimationFrame 处理程序。

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.

怎么能我强制IE / Edge在渲染之前调用处理程序？

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

我无法阻止在 requestAnimationFrame 之前的更改我的实际代码是由CSS动画引起的。即使在2次递归调用 requestAnimationFrame 的情况下也会出现此问题。

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.

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：

推荐答案

似乎正在考虑问题

我认为这是因为IE没有足够快地执行requestAnimationFrame，或者它推迟了一点，所以它执行div.style.background ='green';而其他浏览器没有。

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.

我和IE的requestAnimationFrame有类似的问题，我认为这是同样的问题，检查小提琴，即点击你看到的圆圈当其他浏览器不这样做时，它会变绿。

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.

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

<div></div>

我使用该解决方案来计算带有显示的元素的宽度或高度：没有;并且在requestAnimationFrame中重新隐藏元素，并且只有在IE上你才能看到元素可见的时刻。

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在requestAnimationFrame之前执行渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！