專案中遇到的奇怪問題,已定位原因。Attempted to assign to readonly property報錯
起因:專案中寫了個點選事件,增加動態效果,類似於轉一轉,rotate(360)。很簡單的一個特效。
設定元素的transition:transform 1s。 然後動態改變元素的transfrom:rotate的角度。一切看起來沒問題。本地測試,真機測試都OK。但是提測後,在測試的IOS10下的safari,竟然沒有生效。
定位原因: 一開始以為是transform沒有加上字首。但確認後排除。於是真機連線代理測試,在點選事件中alert彈窗,發現並沒有執行。於是確認有報錯。try catch後彈出錯誤。
Attempted to assign to readonly property
查閱資料得知,是safari核心bug。網上有解決方案,不要使用嚴格模式,即刪除`use strict`。
(沒有驗證,因為覺得不可行,因小失大)
解決方案。 猜測是因為Style不可以直接change,但應該可以設定Style.transform。測試可行,但這樣設定多個屬性的時候,並不優雅,可換成class。 不過因為rotate角度涉及到計算,故而本人並沒有採用設定class的方案。
錯誤: dom.style = `transform: rotate(${x}deg)`;
正確 dom.style.transfrom = `rotate(${x}deg)`;