Mobile Browser Crawl Pit tour

Before always feel mobile page is also very easy to write, recently only pen, almost five steps a hole, ten steps a ray. Looked up some information and sorted out some browser compatibility bugs.

If there is a problem with the browser customer service proposed, generally they will be processed. Then the second brother to start the sharing.

　　

QQ Browser X5 kernel issues Summaryhttps://www.qianduan.net/qqliu-lan-qi-x5nei-he-wen-ti-hui-zong/Browser

Because the browser block a portion of the linked image, so you need to guide users to open a new page, you can use the following ways to determine the browser UA

function is_weixn(){    var ua = navigator.userAgent.toLowerCase();    if(ua.match(/MicroMessenger/i)=="micromessenger") {        return true;    } else {        return false;    }}

Back-end judgment is also simple, such as PHP

function is_weixin(){    if ( strpos($_SERVER[‘HTTP_USER_AGENT‘], ‘MicroMessenger‘) !== false ) {            return true;    }      return false;}

"UC Browser" video tag out of document flow

Scene: When the parent element (ancestor Element) of the label is set to the transform style, the label is detached from the document flow.

Test environment: UC Browser 8.7/8.6 + Android 2.3/4.0.

Demo:http://t.cn/zj3xiyu

Solution: Do not use the Transform property. Translate is replaced with attributes such as top and margin.

"UC Browser" Position:fixed properties in the UC browser of the wonderful phenomenon

Scenario: elements that have position:fixed set up obscure sibling elements with a high z-index value.

In the 8.6 version, this situation appears directly.

In the version after 8.7, when the height of the sibling element is greater than the "magical" value of 713, it will be obscured.

Test environment: UC Browser 8.8_beta/8.7/8.6 + Android 2.3/4.0.

Demo:http://t.cn/zyltsg6

"QQ Mobile Browser" does not support HttpOnly

Scenario: A cookie with the HttpOnly attribute expires in the QQ mobile browser version starting from 4.0. JavaScript can directly read the cookie value that sets the HttpOnly.

Test environment: QQ Mobile Browser 4.0/4.1/4.2 + Android 4.0.

"MIUI native Browser" browser address bar hash does not change

Scene: Location.hash is assigned, the address bar address does not change.

But in fact Location.href has been updated, through JavaScript can be successfully obtained to the updated address.

Although it does not affect normal access, users cannot bookmark the address that changed the hash during the access process.

Test environment: MIUI 4.0

The "Chrome Mobile" fixed element cannot be clicked

Scene: Parent element set position:fixed;

Child elements set Position:absolute;

At this point, if the parent element/child element is also set to Overflow:hidden, the "parent element obscures the child element" issue appears.

The visual (view) layer does not appear obscured, but it cannot trigger events bound to that child element. Can be understood as: "See Point not to".

Add: The page scroll down, triggering position:fixed, the feature will only appear when this bug, at the top will not appear.

Test platform: Xiaomi 1s,android4.0 's Chrome18

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

Workaround: Remove the Overflow:hidden of the parent element and the child element.

When using Zeptojs embedded into Android WebView affects normal scrolling

Https://github.com/madrobby/zepto/blob/master/src/touch.js Remove 61 rows, is actually using the native scroll

Iscroll4

Iscroll4 several bugs (from the http://www.mansonchor.com/blog/blog_detail_64.html inside the detailed explanation)

1. The scrolling container does not respond when clicking on a form element, such as the input box or select

onBeforeScrollStart: function (e) { e.preventDefault(); }

Switch

onBeforeScrollStart: function (e) { var nodeType = e.explicitOriginalTarget © e.explicitOriginalTarget.nodeName.toLowerCase():(e.target © e.target.nodeName.toLowerCase():‘‘);if(nodeType !=‘select‘&& nodeType !=‘option‘&& nodeType !=‘input‘&& nodeType!=‘textarea‘) e.preventDefault(); }

2. When adding content to the Iscroll container, the container flashes the bug

of the source code

has3d = ‘WebKitCSSMatrix‘ in window && ‘m11‘ in new WebKitCSSMatrix()

Change into

has3d = false

When configuring Iscroll, Usetransition is set to False

3. Too long scrolling content, leading to stutter and app direct Flash back

1. Do not use Checkdomchanges. Although Checkdomchanges is convenient, timing detects if the container length changes to refresh, but this also means that you need to consume a interval of memory space
2. Hides the Iscroll scroll bar, setting HScrollBar and VScrollBar to False when configured.
3. Momentum, Usetransform, usetransition are set to False when forced to remove various effects.

4. When scrolling left and right, do not respond correctly to the text pull down

Iscroll flashing problem is also related to rendering, can refer to the use of WebKit rendering page principle to solve ISCROLL4 flashing problems ISCROLL4 upgrade to 5 issues to be aware of

Iscroll or scroll class frame scrolling without clicking the method

The following solutions can be used (using DATA-SETAPI)

<a ontouchmove="this.s=1" ontouchend="this.s || window.open(this.dataset.href),this.s=0" target="_blank" data-href="http://www.hao123.com/topic/pig">黄浦江死猪之谜</a>

You can also use this method

    $(document).delegate(‘[data-target]‘, ‘touchmove‘, function () {        $(this).attr(‘moving‘,‘moving‘);    })    $(document).delegate(‘[data-target]‘, ‘touchend‘, function () {        if ($(this).attr(‘moving‘) !== ‘moving‘) {         //做你想做的。。            $(this).attr(‘moving‘, ‘notMoving‘);        } else {            $(this).attr(‘moving‘, ‘notMoving‘);        }    })

以上来源于司徒正美的github
https://github.com/RubyLouvre/mobileHack

Mobile Browser Crawl Pit tour