2019獨角獸企業重金招聘Python工程師標準>>>

最近在一個項目中，碰到了一個問題，是屬于微信內部的問題，或者說，是屬于APP內部的問題，它的根源來自于fixed定位以及-webkit-overflow-scrolling的組合使用，雖然現在還無法理解問題的根源，但這里可以簡單的說一下，問題的情況，以及解決方案。

1：狀況描述

解決方案說的再清楚，都不及一個示例來看，看到的明顯，所以這里，我們就直接來看示例吧：

如果您在PC端，可以使用微信掃碼：

也可以直接去查看，直接掃碼：

也可以直接去查看源碼：出現問題的DEMO；http://www.zhangyunling.com/study/2016/20161204/index-1.html

在微信中看看，然后在瀏覽器中在看看哦，是否發現哪里有差距呢？

2：反向排查

是什么問題導致這種情況的出現呢？

看看我們的代碼，結構異常簡單，比如，其HTML代碼（關鍵代碼），就是如下的樣式：

?

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

<div class="wrapper"> <p class="fixed">固定定位的元素</p> <p>固定定位在IOS的微信APP內部的問題</p> <p>該問題，在一些其他的APP內部，也會出現</p> <p style="height:2000px;"> 控制中間區域的部分 </p> <p>到底了</p> </div>

而CSS代碼，也是很簡單的使用：

?

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

.fixed{ position:fixed; top:40%; left:0px; width:2em; background-color:#000; color:#fff; padding:5px; line-height:1.5em; } .wrapper{ position:absolute; top:0px; left:0px; right:0px; bottom:0px; overflow:auto; -webkit-overflow-scrolling : touch; padding:10px; }

都是很常見的代碼，而且基本可以保證，在移動端，沒有什么兼容性問題，那么前面的問題，又是哪里來的呢?

如果說，這個真的是有兼容性導致的，那么這里，唯一有兼容性問題的一個東西，也只剩下：-webkit-overflow-scrolling了。它用來在IOS系統下，處理滑動慣性的。

既然發現了問題，那么就去嘗試解決一下，既然是這個屬性的問題，那么就再來換一個DEMO，然后所有的代碼不變，只去掉這一個屬性試試唄。

也可以直接去查看：

也可以直接去查看源碼：去掉-webkit-overflow-scrolling的DEMO；

去掉了這個屬性之后，確實好了，前面的問題也不在出現了，如果只是在Android的手機上，那么這樣做，完全沒有問題，但是在IOS下，就變得體驗非常不好了，感覺就像是卡頓的樣子，再也沒有之前滾動的流暢性了，這樣的體驗，還不被批的體無完膚，完全沒法交工的么。

那么只能繼續看其他的影響了。

3：繼續排查

拋開特殊屬性的問題，那么這里只剩下兩個基本的屬性了，對于固定定位來說，.fixed的樣式，已經是屬于最簡的了，無法再做更多的簡化了，那么只能從.wrapper元素來看了。

這里的wrapper的元素，也算很簡單的，但是唯一的疑惑就是，為何這里要使用絕對定位呢？

如果我不使絕對定位，而是直接使用普通流呢？

那么，就去除掉這個絕對定位試試：

直接掃二維碼查看DEMO：

也可以直接去查看源碼：去掉absolute的DEMO；

果然OK了，原來是絕對定位的影響啊，去掉之后，果然變得很流暢了，而且也fixed元素，位置固定，表現正常了。

那么問題就這樣解決了嗎？當然沒有。

4：為什么之前使用絕對定位

回想一下，最前面的代碼，為什么這里要使用絕對定位呢？如果沒有其他的限制，使用普通文檔流布局，不是最佳的選擇嗎？

但是在最初的示例中，卻使用一個絕對定位呢？

其實，因為在真正的項目中，需求并不是這么簡單的，在這個頁面上，頂部其實是要固定一個輸入框的，而頂部固定輸入框的情況，如果直接使用普通流布局的話，就會有兼容性問題，這個問題就不止是在微信內部了，算是在整個IOS系統的瀏覽器下，都會出現這個問題，那這更不可取了，為了解決一個在某些APP中出現的問題，導致在IOS系統下的所有的瀏覽器，都會出現另外的問題。

關于輸入框的問題，可以查看之前的一篇文章：IOS輸入框固定

所以，這里我們還必須使用絕對定位來做這個處理。

那么，這個問題又要如何解決呢？

通過CSS的解決方案，是無法解決這個問題了，而這個問題的出現，又跟JS毫無關系，并且，在前面的文章中，也說過一個問題，就代表了，我們根本不可能通過JS，來解決IOS系統下的這個問題。

因為在IOS的系統滾動時，是不會進行渲染的，這也是這里問題的原因。

為什么無法通過JS來解決這個問題，可以參考之前的一篇文章：

不能通過CSS和JS來解決，那么現在只能去考慮一下HTML的代碼了，是不是HTML的代碼，布局出現了問題，所以才導致了該問題的出現呢？

5：看看HTML的布局

看一下關鍵的兩個元素的布局：

?

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

<div class="wrapper"> <p class="fixed">固定定位的元素</p> </div>

如果這里再變動，那就只能說，把這兩個元素由父子關系，變為兄弟關系了。

所以，接下來就這么試一試吧。

直接掃二維碼查看DEMO：

也可以直接去查看源碼：改結構為兄弟關系的DEMO；

哇…竟然很完美的解決了

6：這是為什么呢？

太官方的解釋，我并沒有找到，但是這里的問題的來源，從前面的示例中，可以有一些簡單的總結。

首先，IOS想要頁面的滾動變得流暢，所以才有的這個元素：-webkit-overflow-scrolling，那么這個屬性的存在，就可能會引起一些其他的問題，這個解釋不了更多了…

還有，語義化標簽是個很重要的概念，這里也更進一步的說明了這個問題，其實，在最初之所以把fixed元素，放在其他的元素內部，主要是為了之后的操作更方便，當然在沒有使用-webkit-overflow-scrolling的屬性的時候，也確實沒有問題，但是這個兩個屬性，碰到了一起，就出現問題了。

IOS系統下，fixed的屬性的諸多問題，這里又添加了一員，希望大家多多注意，平時對于fixed的使用，也多多注意，比如把所有的fixed元素，都放在body元素的下面，而不是放在其他子元素的內部。

這樣也可以避免一些不必要的麻煩。

對于為什么出現這個問題，沒有更深入的認識，所以這里只能把問題的根源稍微說一下，如果您有更深的認識，請指教啦。

總結

本篇文章的內容，本篇的大部分都是屬于，以測試實例來反推原因，并沒有找到官方的說明來解釋這個問題，并且這個只在IOS系統的一些APP內部才會出現問題，而在IOS自帶的Safari瀏覽器，并沒有這個問題的出現，所以這個也許是一些APP的內部，對于瀏覽器有一些修改吧。

如果您對這個情況，有更深層次的理解，懇請指教，謝謝。

轉載于:https://my.oschina.net/jack088/blog/1929818

總結

以上是生活随笔為你收集整理的fixed在微信下的BUG的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。