X Tutup
Skip to content

DynamicComponentLoader: moveNodesAfterSibling causing rendering issues #5077

@mlynch

Description

@mlynch

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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions

    X Tutup