ios10以下safari设置style无效的解决方法
项目中遇到的奇怪问题,已定位原因。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)';
PS:解决iOS10的Safari下Meta设置user-scalable=no无效的方法
苹果为了提高Safari中网站的辅助功能,屏蔽了Meta下的user-scalable=no功能。所以在iOS10下面,就算加上user-scalable=no,Safari浏览器也能支持手动缩放。
我们可以用js加监听事件来阻止手动缩放。
代码如下:
window.onload=function () { document.addEventListener('touchstart',function (event) { if(event.touches.length>1){ event.preventDefault(); } }) var lastTouchEnd=0; document.addEventListener('touchend',function (event) { var now=(new Date()).getTime(); if(now-lastTouchEnd<=300){ event.preventDefault(); } lastTouchEnd=now; },false) }
以上就是本文的全部内容,希望对大家的学习有所帮助
- Android 解决ViewPager设置高度为wrap_content无效的方法 MyViewPager
- Java中设置JAVA_HOME无效的解决方法
- zend studio xdebug设置断点无效解决方法
- table和div设置height:100%无效的完美解决方法
- iOS 浏览器safari中使用JQuery click事件无效解决方法
- winform的Textbox设置只读之后ForeColor无效的解决方法
- D3js-绘制地图时出现过小, 设置scale还是无效 的解决方法
- js中style.display=""无效的解决方法
- 使用Bitmap作为绘图缓冲设置抗锯齿无效的解决方法
- 解决Android设置Style中Activity的退出动画无效问题
- 织梦dedecms当channel设置了type和typeid时currentstyle失效时js解决方法
- winform的Textbox设置只读之后ForeColor无效的解决方法
- xadmin下设置“use_bootswatch = True”无效解决方法
- vue-cli 解决跨域 proxyTable设置无效 报错504--- 解决方法
- table和div设置height:100%无效的完美解决方法
- Android LinearLayout 设置 OnClickListener 无效时解决方法
- vs无法设置断点或断点无效问题解决方法
- crontab设置同步标准时间无效的解决方法
- Tomcat在server.xml中设置<Context>的reloadable无效的解决方法
- ios8在通用设置中文键盘无效的解决方法(中文键盘设置)