| 导语 ios10 的safari,又给前端开发者挖坑了。。测试验证此问题只出现在ios10 safari中。想早点知道结论的,可以直接看最后一个结论~因为,解决过程不重要!

个人原创,未经允许,禁止转载!

本文以项目为基础来谈坑~

一、我们的项目-H5导航

展示一下我们的项目,注意图中红框区域,是有手势滑动效果的区域(右图是滑动到一半的效果,正常情况下,滑动到这个位置松手的话,是会自动设置展开的)。咦,看起来很正常啊。对,现在是正常的

二、异常情况

But,ios10 safari下,显示如下惊人的效果

三、解决过程:

第一步:借来mac,连上safari,调试。(如果不知道怎么调试,欢迎留言...)

第二步:打log。过程太多,省略。结果就是:逻辑完全正常啊!

第三步:第二步失败了,那就用排除法吧,先把可能影响的因素(手势逻辑-原生js写的、禁用原生touchmove事件、transform动画)一一排除。结果是:

注:为什么会考虑到transform动画有影响呢?因为底图遇到过这个问题,已经确定ios10 safari下是有transform的问题了~

影响因素 结论
原生手势动画 完全无影响,把代码注释之后,在ios10 safari中依然可以随手势滑动
禁用touchmove事件 ios10 safari中,竟然还是能滑动。这不科学啊!
transform动画 删掉css3动画后,也是完全不能阻止dom跟随手指滑动

第四步:第三步虽然失败了,可是给我了一个启发,难道是ios10 禁用touchmove是失效的??所以,这时候,我就只写了个禁用touchmove的demo。但是,在手机上一测试。。我的假设又错了。。

第五步:一定有哪里不对。。突然之间,看到了这个滑动区域的css样式,写了height,就鬼使神差的取消了这个样式,然后去滑动DOM,发现,竟然不错位了。。OMG。。

第六步:改写代码。但是改写过程中,发现使用translateY时,要写高度才行。。问题终于找到了

bug修复前的代码:

css:

.route-plan {
    /*其他css*/
    height: 100%;
}

javascript:

滑动过程中:

self.planDiv.style.webkitTransform = 'translateY(' + nowPageY + 'px)';

松开手指,最大化页面时:

self.planDiv.style.webkitTransform = 'translateY(0px)';

松开手指,最小化页面时:

// 跟此bug不相关的逻辑

bug修复后的代码:

css:

.route-plan {
    /*其他css*/
    height: 149px;
}

javascript:

滑动过程中:

self.planDiv.style.height = '100%';
self.planDiv.style.webkitTransform = 'translateY(' + nowPageY + 'px)';

松开手指,最大化页面时:

self.planDiv.style.height = '100%';
self.planDiv.style.webkitTransform = 'translateY(0px)';

松开手指,最小化页面时:

self.planDiv.style.height = '149px';
self.planDiv.style.webkitTransform = 'translateY(0px)';

这3种情况,去掉任何一个的高度或者transform代码,就会出现错乱情况。。

至此,bug完美解决~

四、结论:

ios10 safari中,transform : 'translateY(0px)' 和 height要配合使用,才会正常。。

个人原创,未经允许,禁止转载!

ios10 safari 的坑!的更多相关文章

  1. ios10 safari浏览器 在touchmove 里面写e.preventDefault(); 不起作用 的解决方法

    最近做手机端项目遇到一个问题,就是在ios10系统里面  safari浏览器 在touchmove 里面写e.preventDefault();不起作用 更种google 还是没有找到解决方法 最后找 ...

  2. iOS10你掉坑了吗?

    坑1: 系统导航栏上按键消失问题 坑2: canOpenURL 调用返回NO问题 坑3: iOS10 权限崩溃问题 坑4: xib不好用了?别怕看这里! 坑5: command +/注释失效 坑6: ...

  3. safari的坑

    当将图片src设置为空字符的时候,图片仍然还在:

  4. css中的各种单位简述以及ios10下safari禁止缩放的问题

    px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...

  5. 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令

    最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...

  6. JS开发打气球游戏

    JS开发打气球游戏 观视频<月薪4万的程序员有多强?半小时原生JS开发打气球游戏,征服现场数万人!> 清晨,日常打开B站,被首页此视频的标题所吸引,虽一看就是标题党,但还是没能抑制住好奇心 ...

  7. 前端多媒体(4)—— video标签全面分析

    测试地址:https://young-cowboy.github.io/gallery/html5_video/index.html 属性 一些属性是只读的,一些属性是可以修改从而影响视频播放的. a ...

  8. 打开自定义链接新窗口(safari JS prompt的坑!)2016.03.08

    很简单的一个小练习,但做的过程中发现safari的一个坑,使用prompt()方法的时候,点击取消和不输入一样,会返回空字符' ',而不是null! 要求: 制作新按钮,"新窗口打开网站&q ...

  9. 【safari挖的那些坑】iOS safari 浏览器 时间乱码(ios时间显示NaN) 问题解决

    通常 iOS下时间错误表现形式 问题一: 这个界面运用了大量的日期类型的计算,当我们用JavaScript实例化一个日期对象时,我们可以这样用: var date =new Date(); 上面这段代 ...

随机推荐

  1. 五分钟搭建起一个包含CRUD功能的JqGrid表格

    之前的项目也曾用过JgGrid对它的基本功能也是略有了解,网上有个国外的开源的项目,但是不适合个人的风格,所以花了3天空余的时间封装了下JqGrid,也算是参加开发工作10个月以来写的第一个比较完整的 ...

  2. ELK——Logstash 2.2 mutate 插件【翻译+实践】

    官网地址 本文内容 语法 测试数据 可选配置项 mutate 插件可以在字段上执行变换,包括重命名.删除.替换和修改.这个插件相当常用. 比如: 你已经根据 Grok 表达式将 Tomcat 日志的内 ...

  3. Apache Spark源码走读之14 -- Graphx实现剖析

    欢迎转载,转载请注明出处,徽沪一郎. 概要 图的并行化处理一直是一个非常热门的话题,这里头的重点有两个,一是如何将图的算法并行化,二是找到一个合适的并行化处理框架.Spark作为一个非常优秀的并行处理 ...

  4. jQuery插件:简易年月日选择器

    基于jquery写的选择年月日出生日期的插件 <li> <label class="label"><span class="star&quo ...

  5. 通过网络方式安装linux的五种方法

    在线观看:http://video.sina.com.cn/v/b/43086503-1443650204.html http://video.sina.com.cn/v/b/43095530-144 ...

  6. iOS开发常用输入校验

    1.数字字符校验 #define NUMBERSPERIOD @"0123456789." - (BOOL)CheckInput:(NSString *)string { NSCh ...

  7. bzoj1914

    这道题用转化补集的思想一下就很简单了考虑不包括原点的三角形,显然对于一个点,它与原点构成的直线在这条直线同侧的任意两点和这个点构成的三角形一定不是黄金三角形为了避免重复我们只考虑直线上方的两点然后我们 ...

  8. Saltstack自动化运维

    Saltstack三大功能 1,远程执行 2,配置管理(状态) 3,云管理 四种运行方式: Local         本地 Minion/Master C/S Syndic  代理模式 Salt S ...

  9. Sqlite3入门简记

    一,安装Sqlite3 1.入门时看http://www.runoob.com/sqlite/sqlite-intro.html,说的简单,但是适合入门 2.在终端输入sqlite3,没有返回信息,表 ...

  10. HTML5 使用 JS 生成二维码,带头像

    一般在项目开发中,前端显示给用户扫描的二维码基本都是由后端代码生成的,那么这个高大上的功能能不能用 JS 来绘制呢? 答案是肯定的 首先我们需要一个插件 jquery.qrcode.js,该插件基于  ...