[Bug]: DOM Nodes missing / out of order in Mobile browsers

[carlosdanieltt]

Preflight Checklist

• I have searched the issue tracker for a bug report that matches the one I want to file, without success.

What package is this bug report for?

rrweb

Version

v2.0.0-alpha.18

Expected Behavior

The replay should show the DOM nodes in the order they appear to the user and there shouldn't be any sections missing.

Actual Behavior

There is a missing section in the replay and another section is displayed in the wrong order.

Steps to Reproduce

Open the following page in Mobile Safari (tested with Safari on an iOS device, but also reproduces on Android): https://www.kkday.com/zh-hk/product/120782-the-kowloon-hotel-the-window-cafe-buffet

Note the DOM nodes that are children of the section with id="productDetailApp" in the Safari dev console:

Especially note the div with id="review-section" and the div with id="recommend-products-sec". The div with id="review-section" appears on the page just before the div with id="product-info-sec". The div with id="recommend-products-sec" appears near the bottom of the page after the div with id="get-help-sec".

Do an rrweb recording of the page and watch it.

Or use this rrwebdebug: https://rrwebdebug.com/play/index.html?url=https%3A%2F%2Fgist.github.com%2Fcarlosdanieltt%2F86290ae8e3fca1101d05659045d1494b&version=2.0.0-alpha.15&virtual-dom=on&play=on
Gist for the above: https://gist.github.com/carlosdanieltt/86290ae8e3fca1101d05659045d1494b

Note that that "review-section" node is gone and has been replaced by the "recommend-products-sec" node, which is now above the "product-info-sec" node.

Note the DOM nodes inside the rrweb player:

Testcase Gist URL

https://rrwebdebug.com/play/index.html?url=https%3A%2F%2Fgist.github.com%2Fcarlosdanieltt%2F86290ae8e3fca1101d05659045d1494b&version=2.0.0-alpha.15&virtual-dom=on&play=on

Additional Information

No response