使用ResizeObserver重绘背景会导致FireFox闪烁

Question

我正在使用Trianglify为div元素创建背景。我想编写该函数以在窗口调整大小时重新生成背景。

这是将生成的png添加到div的函数。

const header = document.querySelector('#header');

const addBackground = target =>{
    const dimensions = target.getClientRects()[0];
  const pattern = Trianglify({
    width: dimensions.width,
    height: dimensions.height,
    cell_size: Math.random()*200 + 40
  });

  target.style['background-image'] = 'url(' + pattern.png() + ')';
}

addBackground(header);

这是ResizeObserver

const ro = new ResizeObserver( () => {
  addBackground(header);
});

ro.observe(header);

这在chrome和edge上可以正常工作，但是会在FireFox中产生效果，在FireFox中，直到用户完成大小调整后才生成背景图像。如果在调整大小时没有清除背景，这会很好。

我创建了一个小提琴，以重新创建问题。

Link to Fiddle