"HTML5 difficult diseases" rendering bugs when leaving the document stream

Bug Recurrence

Recently, the ticket team found a bug in a complex page layout, very strange and difficult to locate, this kind of problem generally will come to me here, the problem is, change the DOM structure, the page does not render!!!

As the picture shows, I changed the DOM structure dynamically, and the result page that lump became nothing, quite strange!!! PC analog iphone can be reproduced, the iphone, Note4 and other mobile phones can also be reproduced, because this bug I am not the first encounter, quickly attracted attention, summed up can be attributed to:

JS code changes the HTML structure of the fixed element (usually after the animation and the layout is relatively complex), the page will not render

Problem locating-separation method

In the spirit of discovery, positioning the problem, the steps to solve the problem, I began to position, the difficulty here is that this kind of problem is often very difficult to locate, because his DOM tree is quite complex, first I did a thing, directly to its htmlcss separated, get rid of JS reason, directly display the DOM.

So the problem is not, this is very puzzling, is JS to its impact? After a round of entanglement, the positioning failed to start the two-wheel positioning.

Problem positioning-minimizing problems

This problem is really difficult to deal with, the light depends on the page may not be processed, this time the ticket to the local, deployed, and did a few things:

① removes the extra business code from the page and basically doesn't do anything.

② Remove redundant DOM structure (DOM may be relatively complex because we are a single-page application)

Open the corresponding business code a look, 3000 lines, immediately want to vomit:

This time the line to read the code is 2B behavior, directly to the display of the calendar code:

Then make a little change, the other business logic all get rid of, the event binding also get rid of, leaving only the events that show the calendar, direct 1 Click to display the calendar, this time the formation of the DOM structure from more than 4,000 lines into more than 1000 lines, but there are still bugs

Problem locating-css Reset

Because the ticket to the calendar style, did reset, so there is reason to suspect that their own CSS caused the problem, so want to remove their CSS reference tried, although the style is ugly, but the problem still exists ...

Problem locating-js logic

At this point there is reason to suspect that its calendar display, itself has a certain logical function caused error, so saw the calendar show behind the things, and to prevent the DOM structure is too large, the month display set to January.

It's like this, he's still rendering, not handling, a little hurt self-esteem!!!

Because this calendar shows a right to left animation, this time the animation turned off, but found that the problem solved!!! Where the code is implemented for Zepto, is not the key

$el. css ({
"-webkit-transform": Preparecss,
transform:preparecss
})
. Show ()
. Animate ({
"-webkit-transform": "Translate (0, 0)",
Transform: "Translate (0, 0)"
}, "Ease-in-out", Functio N () {
$el. css ({
"-webkit-transform": "",
Transform: ""
});
});

Problem positioning success-out of document stream rendering

The final problem positioning success, at least from the performance and processing is positioned successfully, in simple terms:

After the animation is finished, if I change the HTML of one of the subunits in the fixed element, there will be no response, but we can change the static element at the same time, it will cause a rendering. This is the ghost of God!!!

Problem Discovery-Rendering differences

To understand this, we have to see the details of the rendering, which makes a comparison:

does not cause static DOM changes

Causes static DOM to change

Note here to observe the last paint can see the rendering of things different, resulting in this difference is what, we have a few comparisons

Here's a diff, because there's some management of the static element and the fixed element here, and we're trying to manipulate the elements that are completely unrelated. It turns out that there's no impact, so the solution to this type of problem is:

When moving an overly positioned element layout, the occasional operation of the fixed element HTML does not render, and the solution is to change the static element associated with it to boot the rendering

Just used to set up HTML, and here's what you can do with it:

El.html (el.html ())

can achieve the same function, but the cause of the problem is still unknown ... Not to say is not a regret!