摘要：
　　昨天下午公司同事在测新版手机端网站，用iphone的同事反应了两个问题。一个是关于滑屏不流畅，这个可以用-webkit-overflow-scrolling:touch来解决，另一个问题是position:fixed失效了，经过一番测试最终找到了原因并解决了问题......

经过一周的加班，公司新版移动端网页已经完成了。昨天下午，同事们在各自的手机上开始了各种姿势的测试，然后，我就为fixed失效的问题懵了1个小时！

在讲坑之前，同事们反应的第一个问题是：iphone手机中滑屏卡顿，而android手机上可以像飞一样的滑动。

在网上搜索了下，找到了一个属性可以让滑屏变得流畅些。

一、iphone手机滑屏不流畅的解决方法

网上代码：-webkit-overflow-scrolling:touch。经测试，发现在iphone手机上果然有效果。为了方便看官们体验下效果，下面会放两个案例。快拿出你们的iphone手机扫码体验下吧！跟艺灵一样还在用android手机看官就别扫了，因为不是安卓的菜......

案例一：未添加属性前，iphone手机上滑屏时，会略显卡顿。(建议使用自带的safari浏览器打开。可以先用微信扫码，然后右上角用浏览器打开)

案例二：添加-webkit-overflow-scrolling:touch属性后，iphone手机上滑屏时会流畅些。

虽然添加属性后已经好多了，但还是有些慢，这个应该是图片太多引起的。

二、iphone6 plus微信上不支持position:fixed的一次经历

过了一小会儿，公司一同事的ios手机上又出现问题了(该同事的果机是6plus，版本是：10.0.2（14A456）)。问题二：6plus手机微信打开后，position:fixed;失效了。

接过手机后用自带的safari浏览器或其他浏览器均正常，偏偏微信上出了问题，而且另外的几个iphone果机微信上并没有出现这种问题。以往的经验让我觉得是微信的缓存问题，可是！折腾了10几分钟还是不见好，我这才隐约觉得是哪里出了问题。来张刚说的问题截图：

于是，我开始新建一个空白文档将页面的代码copy了一份开始了慢长的调试。又折腾了半个多小时才找到了问题所在，原来是：html,body{height:100%}和刚才添加的-webkit-overflow-scrolling:touch冲突了，去掉html,body{height:100%}后微信上就正常了。本以为这样就解决了问题，可以网站的css会进行自动合并成一个，而这个合并又将这个问题给扔了出来。

合并这玩意儿是程序的事情，由php程序员来解决。我们还是先来看下上面说的问题到底长什么样吧。先来一张有问题的截图：注意上图中底部的悬浮栏随着页面上滑而上滑。去掉html,body{height:100%}后就正常了。为了让看官更好的体验上面说的这个小坑，壕们拿起iphone，打开微信扫码吧！

案例三：当overflow-x:hidden;-webkit-overflow-scrolling:touch和html,body{height:100%}同时存在时，position:fixed失效了。

案例四：去掉html,body{height:100%}后，6plus微信又支持position:fixed了。

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2016-11-02/446.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。