feat: custom ion-slides mutation observer

[pixelbucket-dev]

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
};

2. 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.

[liamdebeasi]

Thanks for the feature request. Can you provide a GitHub repo of the current behavior? I spoke with the team, and we are a bit hesitant to expose some of the internals of ion-slides. If we can see an example of the issue, we might be able to come up with a good workaround.

[pixelbucket-dev]

Hi @liamdebeasi thanks for the reply. This will be quite tricky because we we're having a lot of high-throughput live data and complex graphs, which won't be easy to mock.

All I am asking is a way to change the default from outside, which can stay as it is, but could give users a bit more flexibility. I did not report this as a bug because I imagined it is intentional. However, to me it feels like a bug, because the defaults you set make certain assumptions and seem to assume a best-case scenario. Correct me if I am wrong 😄 .

The Mutation Observer API has these props set to false for good reason, however, your component sets them to true.

[pixelbucket-dev]

I also just might have found an issue in one of our graphs. I removed it and the problem disappeared. I need to dig deeper to find the reason for it :).

[liamdebeasi]

Our concern is that if users customize the Mutation Observer settings, other parts of ion-slides may no longer be reactive (causing other issues). If you are able to create a minimal reproduction of the issue, I am more than happy to take a look.

[luboslav]

I had similar performance issues with ion-slides. I tried to use custom drag & drop library inside ion-slides component. The library needs to move dom elements very often and these changes trigger internal update of swiper inside ion-slides.