如何解決CSS2Properties在Firefox上沒有索引屬性設置爲'0'錯誤？

我創建了一個div元素，通過Javascript，我想複製由我使用的遊戲引擎初始化的畫布樣式。我使用Object.assign來實現這一點，它在Chrome上完美工作，但是當我在Firefox上測試時，我得到了這個錯誤，它不允許我繼續我的遊戲。我要離開下面的功能代碼：如何解決CSS2Properties在Firefox上沒有索引屬性設置爲'0'錯誤？

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除了風格正常屬性：

來源

2017-09-06 Julián Bonilla

這一切都取決於canvas.style ...它看起來像它有一個屬性「0」？你可以嘗試遍歷它的所有屬性並逐個添加它們，並用console.log來知道哪一個屬性被添加。這將幫助你找出哪個屬性使它崩潰。 – Salketer

@Salketer我在該對象上添加了Firefox檢查器的屏幕截圖。它顯示了所有正常的CSS屬性，還顯示了圖像中顯示的編號屬性。你知道爲什麼會發生這種情況嗎？ –

我找不到任何有關這方面的規格......不知道Firefox是對還是錯。看起來像你必須研究一種機制來繼承正確的屬性......你可以循環遍歷每一個枚舉，並測試它是否爲int，如果是，就不要將它放在新的樣式中。 – Salketer

最後我解決了它這樣做，我不得不檢查的樣式對象的構造函數，並進行額外的踩在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);

來源

2017-09-27 15:41:29

如何解決CSS2Properties在Firefox上沒有索引屬性設置爲'0'錯誤？

回答

相關問題