今天遇到一个奇怪的 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 定位才是
参考文章：
今天遇到一个奇怪的 BUG，在移动端浏览器里用 position:fixed 实现了一个悬浮页面底部的 tabba...
一、ios手机fixed 在ios手机中对定位的fixed不友好，有时定位在底部的按钮会有时出现或不出现，这时可以...
translate内不能包含fixed定位的元素，否则 fixed属性失效
bug 在 ios 中, input 输入唤醒键盘的时候, 固定顶部的元素 fixed 属性失效 通过绝对定位模拟...
在H5页面上fixed定位了一个弹框，但是在ios 12.1系统遇到了焦点乱跑的问题。每当点击键盘的“完成”按钮时...
position: fixed什么时候会失效？ 我们知道，设置了position: fixed固定定位属性的元素会...
1.ios position:fixed 失效 解决办法：换成 position:absoulte 2.ios键盘...
闲言：自己css水平不够导致前段时间碰到position:fixed定位失效的问题，麻蛋，fixed定位不是一直都...
这个页面分为上中下三部分，上部分是还款充值那一块，中部是中间灰色的条，下部分是分期及其明细。其中，上，中，下的导航...
position: fixed 是很常用的定位属性。脱离文本流，用于把目标定位于浏览器的某个位置。然而在写页面的时...
本文标题：iOS 下点击按钮后 fixed 定位失效
本文链接：https://www.haomeiwen.com/subject/xstvsttx.html
网友评论