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)
  }

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

赞 (0)

相关推荐

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

    项目中遇到的奇怪问题,已定位原因.Attempted to assign to readonly property报错 起因:项目中写了个点击事件,增加动态效果,类似于转一转,rotate(360).很简单的一个特效. 设置元素的transition:transform 1s. 然后动态改变元素的transfrom:rotate的角度.一切看起来没问题.本地测试,真机测试都OK.但是提测后,在测试的IOS10下的safari,竟然没有生效. 定位原因: 一开始以为是transform没有加上前缀

  • BootStrap 标题设置跨行无效的解决方法

    BootStrap 标题设置跨行无效的解决方法

    最近在使用BootStrap的表格做一个报表界面(不需要报表的功能,只需要预览并且行列定好无需根据数据量变化,如有更好的框架欢迎推荐.),发现标题设置跨行属性rowspan无效.html如下: <table class="table table-bordered"> <thead> <th colspan="2" rowspan="2">功能分类</th> <th>第二列</th&

  • Java中设置JAVA_HOME无效的解决方法

    Java中设置JAVA_HOME无效的解决方法

    前言 如果你的电脑装有不止一个java环境,但是设置JAVA_HOME无效时,可以参考下面的这个方法,下面话不多说了,来一起看看详细的介绍吧. 背景 我的电脑是win7 64位系统,之前学习java时安装了java 7 配置了JAVA_HOME为64位的jdk 7 快速进入环境变量的方法: 点击win的start按钮 在搜索框中输入env,即可快速定位到环境变量选项 用cmd打开窗口,运行java -version ,可以知道当前运行的java版本是java 7 为了适配jetty服务器,又安装

  • python爬虫headers设置后无效的解决方法

    python爬虫headers设置后无效的解决方法

    此次遇到的是一个函数使用不熟练造成的问题,但有了分析工具后可以很快定位到问题(此处推荐一个非常棒的抓包工具fiddler) 正文如下: 在爬取某个app数据时(app上的数据都是由http请求的),用Fidder分析了请求信息,并把python的request header信息写在程序中进行请求数据 代码如下 import requests url = 'http://xxx?startDate=2017-10-19&endDate=2017-10-19&pageIndex=1&l

  • safari cookie设置中文失败的解决方法

    最近用H5进行手机端开发,由于是window操作系统,为了方便开发和调试,直接在chrome浏览器上进行测试,然后在android机上进行手机端测试,当功能基本完工后,原来在android上运行正常的应用,在IOS上运行时,出现很多奇怪的问题,根据排查,发现是由于cookie未取到值而导致相关信息无法获取. 一开始以为是cookie中文乱码的问题,后来跟踪发现,cookie的值压根就没赋值成功,网上查了资料,发现safari不允许非ASCII编码的值,换句话说:不允许中文存储. 为了解决这个问题

  • ASP.NET在MVC中MaxLength特性设置无效的解决方法

    本文实例讲述了ASP.NET在MVC中MaxLength特性设置无效的解决方法.分享给大家供大家参考.具体分析如下: 一.问题: 在ASP.NET MVC项目中,给某个Model打上了MaxLength特性如下: 复制代码 代码如下: public class SomeClass {     [MaxLength(16, ErrorMessage = "最大长度16")]     public string SomeProperty{get;set;} } 但在其对应的表单元素中并没有

  • Android使用TextView,设置onClick属性无效的解决方法

    Android在布局文件中为View提供了onClick属性,使用方法如下: <TextView android:id="@+id/user" android:layout_width="@dimen/px_171" android:layout_height="fill_parent" android:onClick="iconClickListener" android:clickable="true&qu

  • js中style.display=""无效的解决方法

    本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多的操作,但如果我们style.display=""可能导致没有效果. 看下面一段代码: 复制代码 代码如下: <style>  #name  {      display:none;  } </style> </head> <body> &l

  • JQuery 设置checkbox值二次无效的解决方法

    在此MVC ASP.NET 项目,我利用jquery ajax传输数据给后台controller控制层,返回数据给JQuery数据. 首先必须清除checkbox的选中,因为是ajax的异步操作,是不刷新页面的,所以需要手段充值控件值,使得其为空,不影响下次的拿到数据显示. 言归正传,$("#checkboxID").attr('checked', false);//设置checkbox为不选中状态, $("#checkboxID").attr('checked',

  • wxpython中Textctrl回车事件无效的解决方法

    本文实例讲述了wxpython中Textctrl回车事件无效的解决方法.分享给大家供大家参考,具体如下: 今天使用wxptyhon的Textctrl控件开发客户端时遇到了一个问题, 按照HTML表单的逻辑, 我们在Textctrl里回车应该提交查询, 但是wxpython的Textctrl很奇怪, 回车了居然是像Tab作用一样跳转到下一个控件.这样的话,要完成查询, 要么是鼠标点击按钮, 要么需要按两次或者两次以上. Google了一下, 无答案, 但是得到了一些有用的资料: TextCtrl支

随机推荐