【雜談】小記一個ios11的bug


  前段時間,除了apple發布了新的硬件之外,同步還發布了新的操作系統,IOS11,當大家都將注意力聚焦在那個奇怪的劉海該如何適配的時候,筆者的項目在適配IOS11卻出現了其他的問題。

  眾所周知,IOS在滾動的時候是不能執行js的,這雖然是它內部的實現導致的,也為了解決這一問題,它特地推出的position:sticky屬性,來兼容一些對動態設置fixed的場景,不過,當筆者的測試機升級到了IOS11的時候,一切又不一樣了:    

  在ios11上打開滾動以上的頁面(如果看不到效果可以訪問這個鏈接),會發現頁面上的fixed的button如果滾動得過快則會消失,當滾動停止之后又會再次出現,一個非常奇怪的問題,經過筆者和團隊的小伙伴的多方調試參考,發現主流的解決方案有兩種:

  1、直接避免用瀏覽器的滾動事件,完全使用touch事件模擬滾動,也就是這篇文章所介紹的;

  2、另一種就比較有趣了,能夠在改動比較小的情況下修復這個IOS11的這個bug,請看這個鏈接

  其實原理很簡單,筆者經過一些調試發現,只要滾動的元素用的不是window的滾動條,且fixed的元素不在滾動元素內部,就能夠比較方便的規避IOS11的這個缺陷:

overflow: auto;
-webkit-overflow-scrolling: touch;    
height: 100vh;

  核心代碼就以上的3行,目的就是構造一個和body一樣的容納滾動條的容器,當然,由於這樣設置之后,ios下的滾動體驗比較差,還需要加上一個第二行的那句hack,相關文章可參考這里,這樣,就在最小改動的基礎上,保證了fixed的元素能夠正常的顯示。

  雖然大體上解決了滾動的問題,不過由於ios的一些特殊機制,筆者發現,實際使用上即使是第二種方案也有一定的缺陷(不使用window的滾動條會導致在容器滾動的時候會轉移焦點,然后再一次滾動外層的時候焦點又會再一次轉移,導致再想繼續滾動內部滾動條的話會產生一些額外操作,使用上最好避免有內外都要觸發滾動事件的情況)。

  簡單總結一下,2017年即將過去,雖然大圈子內對於適配新機器劉海的情況給了很多的解決方案,但是當真正落實到具體問題的時候,筆者發現。。碩大的前端圈子竟然毫無聲響,反而是native的同學已經碰到了很多類似的問題,並開展了熱烈的討論。。這也是值得人深思的問題。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM