今天遇到一个奇怪的 BUG，在移动端浏览器里用 position:fixed 实现了一个悬浮页面底部的 tabbar，但是意外发现，点击了页面某个按钮以后，tabbar 就不是 fixed 定位了，表现得跟 position:absolute 一样。（必须在 iPhone 下重现，微信开发者工具和 Chrome 模拟的都无法重现，iOS7、iOS8 均复现了）
后来查了一下，iOS 下的确有这个问题，百度前端团队曾经发表了一篇 Web移动端Fixed布局的解决方案 来讲述自己的方案。
但我这里仅仅是点击了一个 <button>，并不是文本框，为何会这样？
最终通过 Chrome 的开发者工具，发现 button 上有个这样的样式：-webkit-user-modify:read-write-plaintext-only;
后来查了一下这个样式的相关文档，发现这个样式会让 button 具备可编辑的特性，跟文本框也就没差了，难怪会导致这个 BUG。
不过移动端浏览器里，还是要慎用 fixed 定位才是
参考文章：
