fixed在移動端的坑

2021-08-19 22:47:33 字數 300 閱讀 5166

fixed在某些情況下可能導致容器內的子元素的1px邊框線消失,即使使用z-index也無法解決。

解決方法:可以使用translatez屬性來解決

fixed定位的容器內不能帶有input,這是常見的bug。

解決方法: 在input聚焦的時候去掉fixed定位狀態,改為absolute。

fixed+可滾動的容器內會導致fixed定位的子元素在滾動時定位失效,滾動完成後才正常回到fixed的位置。

解決方法:盡量不要在可滾動的容器內包含fixed定位的子元素。

ios不支援onresize事件

fixed在移動端失效的問題

其實在安卓機上fixed的適應性要遠遠比ios上好,真是接地氣啊哈哈。之前第一次遇到這個問題的時候非常驚訝,那時候在用sui mobile的元件庫,裡面就有底部導航欄,用了fixed。但是隨著螢幕向上滾動,超過一定距離,這個底部導航欄竟然也跟著上去了。並且在我的安卓機上是沒多大影響,但是在ios上就...

移動端fixed相容問題

最近做移動端頁面,有個需求類似下圖 底部導航用fixed定位時在部分ios版本中會有問題 1.上滑是底部會跟著滑動,手指鬆開時才會又回到底部 2.軟鍵盤喚起的情況下,也會出現許多莫名其妙的問題 網上搜了下,ios確實對fixed相容不是很好 1 doctype html 2 html 3 head ...

移動端的那些坑

首先我們來看乙個結構 div class header div div class main div div class footer textarea textarea div 其實就是最基本的上中下布局而已,問題是header和footer需要分別fixed到頭部和底部。遇到的都知道在ios的s...