移動端相容性問題解決方案(一)

一隻飛鳥發表於2018-06-24


【UC瀏覽器】video標籤脫離文件流

場景:<video>標籤的父元素(祖輩元素)設定transform樣式後,<video>標籤會脫離文件流。

測試環境:UC瀏覽器 8.7/8.6 + Android 2.3/4.0 。

Demo:http://t.cn/zj3xiyu

解決方案:不使用transform屬性。translate用top、margin等屬性替代。

 

【UC瀏覽器】video標籤總在最前

場景:<video>標籤總是在最前(可以理解為video標籤的z-index屬性是Max)。

測試環境:UC瀏覽器 8.7/8.6 + Android 2.3/4.0 。

 

【UC瀏覽器】position:fixed 屬性在UC瀏覽器的奇葩現象

場景:設定了position: fixed 的元素會遮擋z-index值更高的同輩元素。

   在8.6的版本,這個情況直接出現。

   在8.7之後的版本,當同輩元素的height大於713這個「神奇」的數值時,才會被遮擋。

測試環境:UC瀏覽器 8.8_beta/8.7/8.6 + Android 2.3/4.0 。

Demo:http://t.cn/zYLTSg6

 

【QQ手機瀏覽器】不支援HttpOnly

場景:帶有HttpOnly屬性的Cookie,在QQ手機瀏覽器版本從4.0開始失效。JavaScript可以直接讀取設定了HttpOnly的Cookie值。

測試環境:QQ手機瀏覽器 4.0/4.1/4.2 + Android 4.0 。

 

【MIUI原生瀏覽器】瀏覽器位址列hash不改變

場景:location.hash 被賦值後,位址列的地址不會改變。

   但實際上 location.href 已經更新了,通過JavaScript可以順利獲取到更新後的地址。

   雖然不影響正常訪問,但使用者無法將訪問過程中改變hash後的地址存為書籤。

測試環境:MIUI 4.0

 

【Chrome Mobile】fixed元素無法點選

 場景:父元素設定position: fixed;

   子元素設定position: absolute;

   此時,如果父元素/子元素還設定了overflow: hidden 則出現“父元素遮擋該子元素“的bug。

   視覺(view)層並沒有出現遮擋,只是無法觸發繫結在該子元素上的事件。可理解為:「看到點不到」。

補充: 頁面往下滾動,觸發position: fixed;的特性時,才會出現這個bug,在最頂不會出現。

測試平臺: 小米1S,Android4.0的Chrome18

demo: http://maplejan.sinaapp.com/demo/fixed_chromemobile.html

解決辦法: 把父元素和子元素的overflow: hidden去掉


參考:http://www.cnblogs.com/changningios/p/6486610.html

參考:http://www.cnblogs.com/maplejan/archive/2013/04/26/3045928.html

相關文章