記錄一個overflow:hidden引起的血案-仿QQ音樂webApp

今天回顧QQ音樂作品時,在手機上測試了一下,發現一個bug：rank頁面跳轉rank-detail時,沒有像singer-detail一樣整頁顯示,看起來就像是header和tab把rank -detail遮住了,但PC上chrome的調試工具和微信開發者工具測試均無此問題,于是開始找原因。

以下記錄我的思考過程：

1. 既然是被其他DOM遮擋了,會不會是z-index優先級的問題,遂檢查了排序元件和rank-detail的css代碼,并沒有相關的z-index,排除
2. singer頁面跳轉沒問題,rank卻有問題,而他們共有的組合是歌曲清單（music-list）,是以music-list的嫌疑先排除,此外非共用的元件有rank/rank-detail/singer/list-view,因為問題出現在rank到rank-detail的過程中,于是我把rank-detail換成一個空白元件,問題仍複發,最大嫌疑人指向rank元件
3. 因為是樣式的問題,更大可能是CSS的問題,将rank中的CSS全部注釋掉/把rank-detail改回去,測試:跳轉後,rank-deatil完整顯示

兇手确定為div.rank的

overflow:hidden

屬性,我猜想原因：

rank-detail元件是div.rank的子元素,是以多出的部分會被隐藏,顯示出來的效果就是看起來header和tab把rank-detail遮住了,而并不是開始預想的z-index問題

解決方法：将div.rank的

overflow:hidden

去掉,将scroll元件再往下一個DOM級别引入,

overflow:hidden

也往下寫一個級别,使其和rank-detail的music-list同級,這樣就不會被遮住了,移動端測試也正常~

感想：此問題最大的難點是PC和移動端測試結果的差異性,是以不能像正常問題一樣直接F12調試,更多的是從邏輯上考慮,層層篩選,解題思路很重要~

附上我的項目位址,供參考：[vue2.X仿QQ音樂]（https://davidlin88.github.io/vue-music/）

如有幫助,請不吝star,謝謝~！