| 导语 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. H5手机端开发问题汇总及解决方案

    前言 少侠,请留步,相见必是缘分,赠与你一部<踏坑秘籍> 扎马步 踏坑第一式 ios竖屏拍照上传,图片被旋转问题 解决方案 // 几个步骤 // 1.通过第三方插件exif-js获取到图片 ...

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

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

随机推荐

  1. Sql Server系列:DBCC命令

    DBCC(Database Base Consistency Checker,数据库一致性检查程序)命令用于验证数据库完整性.查找错误和分析系统使用情况等. 1. DBCC CHECKALLOC 检查 ...

  2. BZOJ-1196 公路修建问题 最小生成树Kruskal+(二分??)

    题目中一句话,最大费用最小,这么明显的二分的提示(by 以前morestep学长的经验传授)...但完全没二分,1A后感觉很虚.. 1196: [HNOI2006]公路修建问题 Time Limit: ...

  3. Core Java Volume I — 3.3. Data Types

    3.3. Data TypesJava is a strongly typed language(强类型语音). This means that every variable must have a ...

  4. Android开发-API指南-Bound 类型的服务

    Bound Services 英文原文:http://developer.android.com/guide/components/bound-services.html 采集(更新)日期:2014- ...

  5. SpringMVC经典系列-14自己定义SpringMVC的拦截器---【LinusZhu】

    注意:此文章是个人原创.希望有转载须要的朋友们标明文章出处.假设各位朋友们认为写的还好,就给个赞哈.你的鼓舞是我创作的最大动力,LinusZhu在此表示十分感谢,当然文章中如有纰漏,请联系linusz ...

  6. kernel debuging

    http://blog.csdn.net/XscKernel/article/category/1276234

  7. abap四舍五入的函数

    VALUE '1.6'. DATA p2 TYPE i . CALL FUNCTION 'ROUND' EXPORTING DECIMALS = input = p1 SIGN = '+ ' IMPO ...

  8. linux下用split命令将一个大的文件拆分成若干小文件

    命令 split -l 50 wlan_date.txt wlan 说明:按50行给文件进行拆分,如果没有最后面的参数,命名将会是xaa,xab等.

  9. background——背景属性

    一.背景属性 1.1.背景颜色background-color <style> /*浮动,横向排列*/ div{float: left;} /*background-color属性值支持三 ...

  10. Core2.0知识整理

    概述 Commond-Line ASP.NET结构文件 Startup 配置文件 中间件和依赖注入 依赖注入原理 框架自带的依赖注入(IServiceCollection) 依赖注入生命周期 依赖注入 ...