【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