那些遇到的position-fixed无效事件

本篇文章由：http://xinpure.com/position-fixed-encountered-an-invalid-event/

第一次无效事件

事件主角: transform

应用环境: Chrome/FireFox

事件回顾:

这是在使用 iscroll js滚动库的时候，遇到的问题

当时的需求是需要在滚动到一定的距离的时候，将一个 tab 列表固定到顶部，不随页面滚动

固定定位元素嘛，小事！我们知道这是一个非常普通的需求，实现方式也比较简单，那就是使用 position: fixed 就可以将元素固定到浏览器的指定位置了

而我也照做了，令人无语的是，完全没有效果？！ (仅仅只是 position: absolute 的效果)

后来经过一番调试之后，发现是因为父元素有一个 transform 属性，导致了这个问题的出现。

因为 iscroll 是基于 transform 属性实现滚动的, 所以 iscroll 会通过实时修改元素的 transform 属性以达到滚动的效果

也就是说，只要父元素如果存在 transform 属性，子元素的 position: fixed 属性无效。

Google:

https://bugs.chromium.org/p/chromium/issues/detail?id=20574

"position: fixed" still do not cope with transform value

这个解释好有道理！

链接中也有提到说给子元素添加 -webkit-transform: translateZ(0); 就可以解决这个问题

我只能说亲测无效！

百度:

http://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/

第二次无效事件

事件主角: -webkit-overflow-scrolling

应用环境: 手机Web应用

事件回顾:

在 Mobile Web 开发中，用户体验是个非常重要的点。

所以像平滑滚动的特性是少不了的，通常会使用 -webkit-overflow-scrolling 实现这一效果

该属性控制元素在移动设备上是否使用滚动回弹效果。

-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */
-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */

不巧，这次我又有个将元素设置成 position: fixed 的需求

在有上次的经历(transform)后，并没有让我长什么记性，不过说实话，position 这原本就是一个特别简单的一个属性，又怎么会。。。

只能说话音刚落，瞬间就蒙逼了！又是无效！心中草泥马纵横交错！

最后也是发现，只要父元素的 -webkit-overflow-scrolling 属性值为 touch，子元素的 position: fixed 属性就无效。

Google:

http://stackoverflow.com/questions/29695082/mobile-web-webkit-overflow-scrolling-touch-conflicts-with-positionfixed

http://weblog.west-wind.com/posts/2015/Jun/05/IPad-Scroll-Issues-with-Fixed-Content#RemoveorOverride–webkit-overflow-scrolling

百度:

Not Found