ios10如下safari設置style無效

項目中遇到的奇怪問題,已定位緣由。Attempted to assign to readonly property報錯dom

原由:項目中寫了個點擊事件,增長動態效果,相似於轉一轉,rotate(360)。很簡單的一個特效。
設置元素的transition:transform 1s。 而後動態改變元素的transfrom:rotate的角度。一切看起來沒問題。本地測試,真機測試都OK。可是提測後,在測試的IOS10下的safari,居然沒有生效。測試

定位緣由: 一開始覺得是transform沒有加上前綴。但確認後排除。因而真機鏈接代理測試,在點擊事件中alert彈窗,發現並無執行。因而確認有報錯。try catch後彈出錯誤。代理

Attempted to assign to readonly property

查閱資料得知,是safari內核bug。網上有解決方案,不要使用嚴格模式,即刪除'use strict'。
(沒有驗證,由於以爲不可行,因小失大)code

解決方案。 猜想是由於Style不能夠直接change,但應該能夠設置Style.transform。測試可行,但這樣設置多個屬性的時候,並不優雅,可換成class。 不過由於rotate角度涉及到計算,故而本人並無採用設置class的方案。orm

錯誤:  dom.style = `transform: rotate(${x}deg)`;
 正確   dom.style.transfrom = 'rotate(${x}deg)';
相關文章
相關標籤/搜索