最近利用taro 开发小程序的时候遇到一个烦人的问题：在h5端，执行下拉刷新操作的时候，pullDownRefresh组件自动的加上style="transform: translate3d(0px, 0px, 0px); "，结果导致页面内的fixed布局的内容失效了。
网上找过好多帖子/博客，原因都讲得很清楚，但就是不能解决我的问题。
这里简要记述一下自己查找解决问题的过程，忘性比较大，方便日后回来复习。
说一下情况吧，项目使用的是package.json的部分版本信息：
"@tarojs/components": "2.0.2",
"@tarojs/components-qa": "2.0.2",
"@tarojs/redux": "2.0.2",
"@tarojs/redux-h5": "2.0.2",
"@tarojs/router": "2.0.2",
"@tarojs/taro": "2.0.2",
"@tarojs/taro-alipay": "2.0.2",
"@tarojs/taro-h5": "2.0.2",
"@tarojs/taro-qq": "2.0.2",
"@tarojs/taro-quickapp": "2.0.2",
"@tarojs/taro-swan": "2.0.2",
"@tarojs/taro-tt": "2.0.2",
"@tarojs/taro-weapp": "2.0.2"
页面上有一个使用 position: fixed; 顶部固定按钮和底部固定的tabBar，按照正常情况，使用了 position: fixed; 定位的元素是针对窗口的，不会随窗口的滚动而滚动，但是这里出现了例外了。
首先，在微信小程序中是没问题的，在h5编译后出现了这个问题，仔细查看编译后的DOM结构，微信中是没有将下拉刷新的代码套上页面代码的，而h5编译过后，就将页面代码套进了下拉刷新的DOM中去，而且这个不是人为的，没法修改结构。
进一步调查和查找资料后，知道了原因所在：下拉刷新的时候，自动增加了css式样：style="transform: translate3d(0px, 0px, 0px); "，就是这个transform影响了页面内的fixed布局。
具体原因可以参考这篇文章，里面讲得很详细，大神鑫--transform限制position:fixed的跟随效果，简单来讲就是，父元素使用了transform: translate3d(); 或transform: scale(); 就会降低position: fixed; 元素的垂直效果，变成position: absolute; 简直神坑啊！！!
查找网上的解决方案，有的说改用absolute和height: 100vh; 加overflow: scroll; 试了一下，确实可以实现fixed定位了，但是这个时候又出现了新的问题：当按住屏幕往上拖动的时候，一拖动就触发了下拉刷新，而不是向上滚动。这是因为height: 100vh; 把页面窗口高度固定为100vh了啊，而内部的内容虽然使用 overflow: scroll; 可以实现滚动，但是滚动的对象是内容而不是窗口啊，所以当按住屏幕向上拖动的时候，其实拖动的就是最大的容器----窗口，这样触发下拉刷新也就不奇怪了。
另外，只要页面中有onPullDownRefresh()方法，就存在下拉刷新，即使设置 enablePullDownRefresh: false ，后来在taro 的github里面看到有同样的问题。废话那么多，这里记一下修改内容：
在页面的scss里面，通过覆盖PullDownRefresh组件的样式来解决：
.rmc-pull-to-refresh-transition {
transform: none !important;
}
让下拉刷新完成结束后，禁用掉transform就好了，原来这么容易就解决了，不过transform对fixed的影响确实很坑！
参考内容：
https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/