[H5 incurable disease] rendering BUG when getting away from the document stream,

[H5 incurable disease] rendering BUG when getting away from the document stream,

BUG Reproduction

Recently, the ticket team found a BUG in a complex page layout, which is very strange and difficult to locate. This type of problem will generally come to me at the end. This problem is: Changing the dom structure, the page is not rendered !!!

, I dynamically changed the dom structure, and the result page became nothing, quite strange !!! The iPhone can be reproduced by simulating the PC, and the iPhone, note4, and other mobile phones can also be reproduced. Because this BUG was not my first time, it soon attracted attention. In summary, it can be attributed:

The js Code changes the html structure of the fixed element (usually after the animation and the layout is relatively complex) and the page is not rendered.

Problem locating-Separation

Based on the steps for finding, locating, and solving the problem, I began to locate the problem. The difficulty here is that such problems are often very difficult to locate because their dom tree is quite complex, first, I did one thing and directly separated its htmlcss to get rid of js reasons and directly display the dom.

So the problem is gone. This is confusing. Is it because js has an impact on it? After a round of entanglement, the positioning fails to begin with two rounds of positioning.

Problem locating-Minimal Problem

When this problem is really not easy to handle, you may not be able to handle it simply by viewing the page. At this time, you can get the ticket code locally, deploy it, and do the following:

① Remove unnecessary business code from the page and basically do not complete any functions

② Remove the redundant dom structure (dom may be relatively complicated because we are a single-page application)

Open the corresponding business code and check that there are 3000 lines of code. I want to vomit immediately:

At this time, reading the code row by row is 2B. Find the code that displays the calendar directly:

Then, make a slight change to get rid of all other business logic and bind the event. Only calendar events are displayed, and you can click Show Calendar directly, at this time, the dom structure is changed from more than 4000 rows to more than 1000 rows, but there are still bugs.

Problem locating-CSS resetting

Due to the resetting of the calendar style on the ticket, there is a reason to suspect that the problem was caused by their own css, so I tried to remove their css reference, although the style is ugly, the problem still exists ......

Problem locating-js Logic

At this time, there is a reason to suspect that the calendar display itself has a certain logic function that leads to an error, so you can see what is done after the calendar show, and in order to prevent the dom structure from being too large, set the month to January.

It looks like this, but he still does not deal with rendering, a little hurt his self-esteem !!!

This is because there is an animation from right to left when the calendar is displayed. At this time, the animation is turned off, but the problem is solved !!! The code here is the implementation of zepto, not the key

$el.css({      '-webkit-transform': prepareCss,      transform: prepareCss})  .show()  .animate({    '-webkit-transform': 'translate(0, 0)',    transform: 'translate(0, 0)'  }, 500, 'ease-in-out', function() {    $el.css({      '-webkit-transform': '',      transform: ''    });  });

Problem locating success-rendering out of Document Stream

Finally, the problem is located successfully, at least in terms of performance and handling. Simply put:

After the animation is executed, if I change the html of a sub-unit in the fixed element, it will not respond, but changing the static element at the same time will cause a rendering, nima, this is a ghost !!!

Problem Discovery-differences in rendering

To understand this, we have to see the rendering details. Here we make a comparison:

Does not cause static dom changes

Cause static dom changes

Here, observe the last paint to see that the rendered items are different. What is the difference? We compare them several times.

Here is a comparison of differences, because the static element and fixed element have some management, here we try to operate the element that is completely irrelevant to it. It turns out that there is no impact, so the solutions to these problems are:

When the mobile terminal locates too many element la S, occasionally the fixed element html will not be rendered. The solution is to synchronously change the static element associated with it and then guide rendering.

You just used html settings. This method can be used here:

el.html(el.html())

The same features can be achieved, but the cause of the problem remains unknown... it cannot be said that it is not a pity !!!If you know the answer to this question, please leave a message.