ios10以下safari设置style无效的解决方法

 更新时间:2018年09月21日 11:27:44   作者:白衣卿相  
这篇文章主要介绍了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) 
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • IOS实现自定义透明背景的tabbar

    IOS实现自定义透明背景的tabbar

    这篇文章介绍的是在IOS中怎样把tabbar背景设置为透明,有需要的小伙伴们可以参考借鉴。
    2016-08-08
  • iOS11适配工作及导航栏影藏返回文字的解决方法

    iOS11适配工作及导航栏影藏返回文字的解决方法

    这篇文章主要介绍了iOS11适配工作及导航栏影藏返回文字的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • iOS App开发中扩展RCLabel组件进行基于HTML的文本布局

    iOS App开发中扩展RCLabel组件进行基于HTML的文本布局

    RCLabel组件基于CoreText框架,可以将HTML标记的文本内容转为富文本视图,这里我们就来解读如何在iOS App开发中扩展RCLabel组件进行基于HTML的文本布局:
    2016-07-07
  • iOS组件化开发实战记录

    iOS组件化开发实战记录

    这篇文章主要给大家介绍了关于iOS组件化开发的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-02-02
  • iOS开发之UIScrollView控件详解

    iOS开发之UIScrollView控件详解

    UIScrollView是一个非常重要的控件,其可以展示比设备屏幕更大区域的内容,我们可以通过手指滑动来查看内容视图的每一部分内容,也可以通过手指捏合来对内容视图进行缩放操作,我们每天开发中都不断显式或隐式地与UIScrollView打交道,下面给大家详细介绍UIScrollView控件。
    2016-09-09
  • iOS UIAlertController中UITextField添加晃动效果与边框颜色详解

    iOS UIAlertController中UITextField添加晃动效果与边框颜色详解

    这篇文章主要给大家介绍了关于iOS UIAlertController中UITextField添加晃动效果与边框颜色的相关资料,实现后的效果非常适合在开发中使用,文中给出了详细的示例代码,需要的朋友可以参考借鉴,下面随着小编来一起看看吧。
    2017-10-10
  • 实例详解IOS开发之UIWebView

    实例详解IOS开发之UIWebView

    iOS开发之UIWebView 是本文要介绍的内容,UIWebView是iOS sdk中一个最常用的控件,是内置的浏览器控件,我们可以用它来浏览网页、打开文档等等
    2016-02-02
  • h5 ios输入框和键盘的兼容性优化指南

    h5 ios输入框和键盘的兼容性优化指南

    这篇文章主要给大家介绍了关于h5 ios输入框和键盘的兼容性优化的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • ios App加载本地HTML网页,点击网页链接跳转到app页面的方法

    ios App加载本地HTML网页,点击网页链接跳转到app页面的方法

    下面小编就为大家分享一篇ios App加载本地HTML网页,点击网页链接跳转到app页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • iOS的UI开发中Button的基本编写方法讲解

    iOS的UI开发中Button的基本编写方法讲解

    这篇文章主要介绍了iOS的UI开发中Button的基本编写方法讲解,代码基于传统的Objective-C,需要的朋友可以参考下
    2015-11-11

最新评论