feat: custom ion-slides mutation observer

Feature Request

Ionic version:

[x] 5.2.3

Describe the Feature Request

We’re rendering dynamic content (graphs, D3) inside a caroussel (ion-slides) which repeatedly render streamed data (once a second). This, it seems, causes ion-slides’ Mutation Observer to fire constantly and update each ion-slide. I observed that in the elements tree, each ion-slide’s attributes are updated once per second. The consequence of this behaviour is, while slowly dragging the slides, that sometimes they can jump or flicker erratically. This is really unpleasant from a UX perspective.

To find the source of that issue I had to clone and build Ionic Core manually and link it to our app. I found that the default values of Mutation Observer don’t work for us.

mut.observe(this.el, {
        childList: true,
        subtree: true
});

I mitigated the issue by changing the options object to restore the defaults.

mut.observe(this.el, { attributes: true });

Et voila, flickering/jumping disappear. A side benefit is the noticably smoother dragging performance.

Describe Preferred Solution

There are two options:

1. Extend the ion-slides API to allow passing MutationObserverInit options from outside, e.g.

@Prop() mutationsOptions: MutationObserverInit = {
        childList: true,
        subtree: true
};

1. Prop to tell whether have shallow observations or deep observations.

@Prop() observeChildrenDeep = false;

…

mut.observe(this.el, this.observeChildrenDeep ?  {
        childList: true,
        subtree: true
}): { attributes: true }

Feel free to find better names 😄.

Additional Context

Currently, I cannot get this to work w/o forking/linking Ionic Core because I don’t have access to the internal Mutation Observer setup.

[pixelbucket-dev]

@liamdebeasi I will have to have a look how I can create a simple and abstract version of our complex solution. Won’t be easy. I will keep you posted.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.