Hello everyone, after a long time back to write an article 🤣

The motivation this time was to step on a Flex-related pothole while writing a wheel cast.

Without further ado, let’s cut to the chase

The story background

I wrote a round-robin graph according to the requirements, and found a phenomenon accidentally that the container would bounce repeatedly with the page along with the content switch, as shown in the figure below

Preliminary debugging

It should be because the content text of one group of data is displayed as 4 lines, but the other group of data is displayed as 3 lines, because I tried to delete several divs randomly, among which the bottom left copy was deleted, the problem disappeared.

For better debugging, I will separate this component into a demo, you can have a try

At first, I felt that there was a CSS problem, so I tried to add overflow: Hidden and other operations, but failed. I had no choice but to ask my friends for help.

First of all, I consulted Maomao and found that setting a fixed height for the copy can solve the problem. At this point, Himawari, a group friend, came up with a solution: add a key to the external div of the bottom copy. Tried to work things out. At the same time, another group friend $also gave another plan: to put a position: Absolute div inside the bottom text.

After thanking the three enthusiastic group friends, I reviewed the video and felt that I still had not found the root cause, so I directly discussed it with the three group friends. After a chat based on development experience, we focused on the solution of adding key. Why is it possible to simply add a key? Himawari explained that the observation felt like dom was being reused, so he tried adding a key field and found that the problem was solved.

So the question becomes, why does this happen when you reuse the DOM with a Flex layout?

warren

I tried googling using flex reflow Update and quickly found something

Stackoverflow.com/questions/2…

It was discovered many years ago that flexbox does not re-render the current flexbox after the content changes, but there was a problem 7 years ago in which Dan replied that chrome35 looks fine and should have been fixed in theory.

So I jumped out of VUE and tried it again with native, and found that the above problems still exist, and the phenomenon seems to have a scroll into view action (the phenomenon can be obviously observed after the page is slightly scroll down). portal

conclusion

In the future, be aware of dom reuse issues when using Flex layouts. If such issues occur, try adding keys, or try triggering backflow redraw in native environments. There are a lot of flex layouts out there.

In addition, the root cause of this problem has not been found so far, and it is only speculated that it is caused by browser behavior. I hope interested students can try more if possible to see if there is the same problem in other browsers (PS: I tried it with Chrome Mobile and it is OK).

Finally, hopefully someone big enough to end this problem