Strange problems encountered in the project, the cause has been located. Attempted to assign to readonly property report an error
Cause: A click event was written in the project to increase the dynamic effect, similar to rotate (360). A very simple special effect.
Set the transition of the element:transform 1s. Then dynamically change the angle of the element's transform:rotate. Everything looks OK. Local tests and real machine tests are OK. However, after the test was introduced, the safari under the test IOS10 did not take effect.
Positioning reason: At first I thought it was because transform was not prefixed. But it is excluded after confirmation. So the real machine connection agent test, alert pop-up window in the click event, and found that it was not executed. So I confirmed that there was an error. An error pops up after try catch.
Attempted to assign to readonly property
After checking the information, I found out that it was a safari kernel bug. There are solutions online, don't use strict mode, i.e. remove 'use strict'.
(No verification, because I think it is not feasible, and I lose the big one because of the small)
Solution. The guess is that Style cannot be changed directly, but it should be set. Testing is feasible, but when setting multiple attributes in this way, it is not elegant and can be replaced with class. However, because the rotation angle involves calculation, I did not use the solution to set the class.
Error: = `transform: rotate(${x}deg)`;
Correct = 'rotate(${x}deg)';
PS: Solution to the invalid method of setting user-scalable=no in Safari in iOS10
In order to improve the auxiliary functions of websites in Safari, Apple blocked the user-scalable=no function under Meta. So under iOS10, even if user-scalable=no is added, Safari browser can support manual scaling.
We can use js to listen events to prevent manual scaling.
The code is as follows:
=function () {
('touchstart',function (event) {
if(>1){
();
}
})
var lastTouchEnd=0;
('touchend',function (event) {
var now=(new Date()).getTime();
if(now-lastTouchEnd<=300){
();
}
lastTouchEnd=now;
},false)
}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.