fixed在手机端的bug

 

 

一、带input的fixed在ios下失效

在ios下，一个页面如果有fixed浮层，并且浮层里面有input，那么当input focused的时候，fiexed层的位置就会错乱。

如图:

 

 

例子：http://demo.zhangruojun.com/static/page/iframe-fixed/input-fixed.html

（扫码查看页面效果）

解决方法是，将除了fiexed层的内容放在div.container里面并加上以下样式。即整个body设置100%的高度不做滚动，只给内容div自己滚动。

.container{ 
    position: relative; 
    height: 100%; 
    overflow: auto;  
    -webkit-overflow-scrolling: touch;
 }

例子：http://demo.zhangruojun.com/static/page/iframe-fixed/input-fixed-方案.html

（扫码查看页面效果）

 

二、iframe里的fixed在ios下失效

如果我们的页面里面嵌入了一个iframe, iframe页面里面又正好有fixed浮层，那么这个时候ios下查看这个页面，会发现fixed失效了。

例子：http://demo.zhangruojun.com/static/page/iframe-fixed/有bug.html

（扫码查看页面效果）

底部按钮浮层并没有固定在屏幕的底部，而是掉在页面底部去了。

这是ios自带的bug，android下并不会有这个问题。

解决方法还是，将除了fiexed层的内容放在div.container里面并加上以下样式：

{ 
    position: relative; 
    height: 100%; 
    overflow: auto;  
    -webkit-overflow-scrolling: touch;
 }

http://demo.zhangruojun.com/static/page/iframe-fixed/方案一.html

（扫码查看页面效果）

 

三、1跟2总结

将html,body高度设置为100%，将页面内容都装在高度为100%的容器里面，滚动不放在body，放在这个子容器，然后fixed层作为其兄弟节点存在。

 

四、Android某些机型下

Android某些机型下，fixed在底部的input，会被弹出来的软键盘挡住。

不要把input放在fixed层里面，换一种交互方式。

 

原文地址：http://zhangruojun.com/iframeli-de-fixedzai-iosxia-shi-xiao/