如何解决CSS2Properties在Firefox上没有“0”错误的索引属性设置器？

Question

我正在通过Javascript创建一个div元素，我想复制由我正在使用的游戏引擎初始化的画布样式。我使用Object.assign来实现这一点，它在Chrome上完美运行，但是当我在Firefox上测试时，我遇到了这个错误并且它不允许我继续我的游戏。我将离开下面的功能代码：

export const addCanvasOverlay = (id) => {
  const canvas = game.system.canvas;
  const overlay = document.createElement('DIV');
  overlay.id = id;
  /**
   * Clone canvas style to ensure the overlay is always over it
   */
  const trackCanvasSize = () => {
    Object.assign(overlay.style, canvas.style);
    overlay.style['pointer-events'] = 'none';
  };
  window.addEventListener('resize', trackCanvasSize);
  trackCanvasSize();
  canvas.parentNode.appendChild(overlay);
  return overlay;
}

有谁知道可能导致这种情况的原因？

除了样式普通属性之外，这是我在canvas.style上得到的：

Answer 1

最后我解决了这个问题，我必须检查样式对象的构造函数并在Firefox上做一个额外的步骤：

let styles = {};
switch (canvas.style.constructor.name) {
      // Fix for firefox
      case 'CSS2Properties':
        Object.values(canvas.style).forEach((prop) => {
          styles[prop] = canvas.style[prop];
        });
        break;
      case 'CSSStyleDeclaration':
        styles = canvas.style;
        break;
      default:
        console.error('Unknown style object prototype');
        break;
    }
Object.assign(overlay.style, styles);