文章目录

1, fixed header 在页面滚动的时候会跟随页面一起滚动,到页面滚动停止之后,重新回到fixed的位置

将fixed元素放在页面底部

2,fixed footer 中有input focus 时 位置发生变化

focus时
        $('body,html').css({
            'overflow':'hidden', 
            'position': 'relative', 
            'height': '100%'})
        $('.fixed-input').css({'position':'absolute'})

blur 时 再还原样式

3,通讯录效果中字母索引 -webkit-overflow-scrolling: touch; 在 ios中滑动字母索引时造成页面显示空白的问题

4,一些android 浏览器中 行内元素 设置 flex 无效

给父元素设置 display: inline-flex;

5, 页面初始化时无法自动调起输入法键盘, 可以通过 传说中的点透bug 来实现这个效果,但前提是input在同一位置

6,-webkit-line-clamp 出现省略号时的文字块高度和不出现省略 号时的高度不同

需要设置固定高度,但是由于在移动端字体大小适配的问题,使高度无法固定,
所以用 em 为高度单位设置 height: calc(2em * 1.5 )  行数*行高  其实可以算出以em为单位的一个基准值  

7, ios 下 给body设置padding-top 来为 fixed navbar 占位,如果body 同时设置了 -webkit-overlfow-scrolling: touch, 此时body的paddingTop 的内容会覆盖在fixed元素上面遮挡住navbar

虽然 给body 设置transform: translate3d(0, 0, 0); 可以解决这个问题,但是 如果是在复杂的页面中,
有可能会引起其它的诡异问题,所以最好的解决办法是把navbar放在页面结构的底部。

transform 下的元素 fixed 失效,所以才解决了上面的问题,操,,真你妈烦。
文章目录