-
Notifications
You must be signed in to change notification settings - Fork 27.1k
Description
Currently, DynamicComponentLoader calls DomRenderer.attachFragmentAfterElement in the corresponding AppViewManager, which then calls moveNodesAfterSibling when creating and adding a new component next to an existing component.
AppViewManager:
| this._renderer.attachFragmentAfterElement(elementRef, view.renderFragment); |
DomRenderer:
| attachFragmentAfterElement(elementRef: RenderElementRef, fragmentRef: RenderFragmentRef) { |
The issue is that moveNodesAfterSibling first inserts the new element before the target element, and then shuffles it around to be after the target element. That seems unnecessary when we know the new element is going to come after a target element, and it causes some subtle issues in the browser.
For example, in Ionic, when you push a new component into a navigation stack the first component's scrollTop is reset. You can see a vanilla HTML/JS example of insertBefore causing scrollTop to reset here (scroll down in the red area before the 3 second timeout fires): http://plnkr.co/edit/zpexZC8OoxNVLEhoVAKW?p=preview
We can work around it by saving and restoring the scrollTop but I also worry about potential flickers and other issues with this method.
It seems like a solution would be to allow for an explicit insertAfter using element.parentNode.insertBefore(nodes[0], element.nextSibling) to avoid the element detach/reattach and the subsequent issues.