Turn: Some bugs and solutions in mobile development

Web development to face a variety of browsers, people are very headache, and mobile development, you have to face not only the browser, but also face various versions of the mobile phone, iOS better, and Android is a variety of, you may have been in the development of the torture, or is being tortured, I am here to say a few of the more difficult problems I have encountered in development, and solutions, to other friends to wake up, because once encountered these bugs, although the solution is not difficult, but you may spend a few hours, days, or even longer to solve them, you have to pay attention to these bugs, Later found that other bugs will continue to add, and I hope you can also put your bug or solution to me, I will add to the article, help others to solve the problem together .

Bug One: the phenomenon:

android4.0 above some of the phone's webview, when the canvas is smaller than the screen size, the drawing will appear ghosting, that is, a graph is drawn only once, but there are two

Solution:

The canvas outer div needs to set the attribute style= "Overflow:visible;-webkit-transform:translatez (0);

Bug Two:

Phenomenon:

The canvas drawing in the Galaxy S4 WebView has a serious bug, whether fillrect or DrawImage, which will draw the 1 pixels from the beginning of the 0,0 to the entire canvas, causing the screen to fail to display. Note: This behavior only occurs on first page load and does not occur after the second entry to the page.

Solution:

When the Galaxy S4 WebView displays canvas, there are two conditions that must be met:
1,canvas the outer div needs to set the attribute style= "Overflow:visible;-webkit-transform:translatez (0);"

2, the page must not contain an IMG tag

Bug Three: Phenomenon:

Some of the phones in the android4.x are sometimes jammed when changing the size of the canvas. As you may all know, resizing a canvas can be a complete refresh of the canvas, but it can also cause a portion of the 4.x phone to die.

Solution:

Refresh the canvas with Clearrect.

Bug Four: Symptoms:

WebView Page introduces the Iscroll framework, it causes a portion of the android4.x Click event to occur two times. This is actually a frame bug, but a lot of people are using it, just last week I met a friend in the group and asked the question.

Solution:

Meet friends do not have to ask Google or Baidu, because the official did not provide solutions, so at present can only abandon Iscroll

Remarks: thank the Netizen [Meathill] to provide information, "can set Click:false, or Iscroll will use proxy way to trigger a click", the friend encountered the problem can try.

Bug Five: the phenomenon:

Use HTML5 canvas for drawing, android4.0 above, a large number of mobile phones will often appear clearrect invalid bug.

Solution: Scenario 1:Use [JavaScript]View PlainCopy  

1. Canvas.width=canvas.width

To replace

[JavaScript]View PlainCopy 

1. Canvas.clearrect (). GetContext ("2d"). Clearrect ()

However, the effect of this is that a small number of other (such as the domestic Samsung NOTE2 and S4, etc.) will appear in the browser card dead.

Scenario 2:

is to use an opaque background, for each of the game or application to redraw, the opaque background will not have the problem of clear screen, of course, this is the choice of the detour, for the need to set the canvas background transparent situation is still not resolved.

Scenario 3:

[JavaScript]View PlainCopy 

1. Canvas.clearrect (0, 0, W, h);
2. canvas.style.visibility = ' hidden '; //Force a change in DOM
3. Canvas.offsetheight; //Cause a repaint to take play
4. canvas.style.visibility = ' Inherit '; //Make visible again

This can cause delays.

Scenario 4:

[JavaScript]View PlainCopy  

1. Canvas.clearrect (0, 0, W, h);
2. Canvas.style.display = ' None '; //Detach from DOM
3. Canvas.offsetheight; // force the Detach
4. Canvas.style.display = ' Inherit '; //Reattach to DOM

This will produce jagged, but I think it is the best solution at the moment.

Program 3 and Scenario 4 are provided by Netizen Codezz, the source of the solution.

https://medium.com/@dhashvir/android-4-1-x-stock-browser-canvas-solution-ffcb939af758

Bug VI: Phenomenon:

Android phone, 6.1,qq browser X5 kernel, these three conditions exist under the premise, when the input box pops up, the entire canvas will be squashed. I hope the upgrade will solve this problem later.

Solution:

There is no perfect solution yet, if anyone knows, please tell me.

The best way to feel right now is to leave the canvas page and the page with the input box separated.

There is also a way to solve only a part of the phone problem, that is, in the canvas of the previous layer of the Div, The settings style.width and style.height are equal to the style.width and style.height of the canvas, but have been tested to resolve only a subset of the phones.

In addition, the following are limitations or bugs when using an iframe in Android4.0,

The bug in the IFRAME I only met a part, and then a little check, found that there are many, I have all listed

Even if the display:block is set in the 1,<a> tag, it will become display:inline.
2, the element with the Position:fixed property cannot be clicked. (in addition to Android Chrome, if the position attribute of the element in the IFRAME is specified as fixed or absolute, the drop-down bar cannot be used.) ）
3,document.body.scrolltop cannot be obtained.
4,-webkit-tap-hightlight-color specified is invalid.
5,anchor Link is invalid
6, the bottom of the page <a> hyperlinks can be clicked, but the click is not valid, the page will not jump.
7,z-index overlapping elements, pointer-events specified is invalid.

－－－－－－－－－－－－－－－－－－－－

Using an absolutely positioned input box, it is sometimes impossible to enter something that involves the default browser for all versions of iOS and Android. There is no perfect solution for the moment, only a very stupid way, is to add input.value in the onload = ""; This changes the value of the input box so that it can be entered normally.

Turn: Some bugs and solutions in mobile development