[Accordion] Mobile performance

[Loktor]

On Mobile Devices the Expansion Panel is rather slow/feels sluggish when opening/closing it.

• [X] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When i open/close an expansion panel on a mobile device, then the open/close animation for the expansion panel should be fluid and not sluggish.

Current Behavior

When i open/close an expansion panel on a mobile device, then the animation of opening/closing the control should be fluid/feel fluid

Steps to Reproduce (for bugs)

1. Simply visit https://material-ui.com/demos/expansion-panels/ on a mobile device and open/close an expansion panel, then you should be able to see it yourself
2. I also tested the expansion panel of https://material.angular.io/components/expansion/overview on my mobile phone there i don't have the problem that the open/close animation is slow/sluggish

Context

Currently this issue affects mobile users of material ui.

Your Environment

Tech	Version
Material-UI	v1.0.0-beta.40
React	16.3.0
browser	Mobile Chrome
Mobile Device	Huawei P10

Benchmarks

• https://www.stefanjudis.com/snippets/how-to-animate-height-with-css-grid/

[leMaik]

Also experienced this in a small app I wrote. It gets worse the more content the expansion panel slide that is animated has.

This might be because Collapse is not really optimized? :thinking: Not sure if we really need Transition here. Shouldn't some simple CSS transitions be sufficient?

[brendansiow]

+1 to this issue. any workaround guys?

[dannybwee]

Same, is there currently a fix?

[mate-h]

Just leaving a note here: upon further examining the demo page, the performance seems to drop around the top of the page, where the panel has a lot of elements below it that need to be "pushed down" as it animates its height. The expansion panels at the bottom are noticeably smoother.

[adriangazzoli]

+1 as well, I noticed it works fine on Windows, Mac and iOS devices on most browsers but for some reason is sluggish on older and newer Android phones running Chrome. Is there any way to disable these transitions?

[BarnT]

+1 as well, I noticed it works fine on Windows, Mac and iOS devices on most browsers but for some reason is sluggish on older and newer Android phones running Chrome. Is there any way to disable these transitions?

There is a convenient way to do so: use [@.disabled] However there are some drawbacks: 1: This disables all the animations inside the panel's content too. In case you want you have to avoid this behavior, you have to set [@.disabled]="false" for the content explicitly. 2: I've seen cases where setting [@.disabled] to true has broken the layout of the panels. I guess this happens because @.disabled disables the angular animations only and not the transitions which are defined in css.

[emanuelet]

+1 It's a problem that I'm encountering heavily in my app where I have 50-200 list items each as an Expansion Panel

[oliviertassinari]

As a workaround for low-end devices, you can disable the animation: https://github.com/mui-org/material-ui/issues/10560#issuecomment-439147374. I believe we could add a property to disable the animation.

[TKdevlop]

I found a temp solution but it disables all animation my app(https://zen-mestorf-19a622.netlify.com/) is really small so it doesn't matters put this at the root of your CSS file.

* {
  -o-transition-property: none !important;
  -moz-transition-property: none !important;
  -ms-transition-property: none !important;
  -webkit-transition-property: none !important;
  transition-property: none !important;
}

[oliviertassinari]

@TKdevlop Alternatively: https://material-ui.com/getting-started/faq/#how-can-i-disable-animations-globally.

[oliviertassinari]

It would be great if somebody can provide a real-life reproduction example.

I have compared the performance of the component with the angular implementation. It looks identical if not better:

https://q9y76k7lpj.codesandbox.io/

https://angular-lebzbu.stackblitz.io/

[mhlsf]

It would be great if somebody can provide a real-life reproduction example.

I have compared the performance of the component with the angular implementation. It looks identical if not better:

https://q9y76k7lpj.codesandbox.io/

https://angular-lebzbu.stackblitz.io/

Did you try on an Android phone ? The issue is on the Chrome app of Android for me.

[oliviertassinari]

@mhlsf I have tried with a OnePlus 6, a €400 phone. Probably not a good benchmark for this. Can you reproduce the problem with the linked codesandbox, what phone do you use? It renders 7 simple expansion panels.

[mhlsf]

@oliviertassinari You are right this is working well on my one plus 5. I will try to submit a similar case to my project to see if you have the same issue.

[drazik]

Is it possible that the performance are suffering from the animation on the height property? It seems it would be better to animate on transform (see https://developers.google.com/web/updates/2017/03/performant-expand-and-collapse).

[oliviertassinari]

@drazik This would create a distortion during the collapse animation.

[drazik]

You mean the content would be also scaled? The google article is handling it by applying a counter-scale. You think this would not be possible to use this technique here?

[ptbrowne]

@oliviertassinari One way to give control of the Collapse animation to the user would be to make it possible to choose the Collapse component at runtime via a CollapseComponent prop. This would enable an app for which the performance of the Collapse is not sufficient, to override it easily, iterating on the performance in-app, before potentially contributing the improved Collapse component back to the community.

Would you be open to a PR adding a CollapseComponent prop to ExpansionPanel ?

[oliviertassinari]

The google article is handling it by applying a counter-scale.

OK, it's worth trying. Anyone want to give it a try? I would advise to do it by dichotomy. We are animating different properties. The first step is to identify the slowest animation.

Would you be open to a PR adding a CollapseComponent prop to ExpansionPanel?

@ptbrowne Most of our components using a transition component have a TransitionComponent property. So yes, definitely.

[ptbrowne]

@ptbrowne Most of our components using a transition component have a TransitionComponent property. So yes, definitely.

I am on it : https://github.com/mui-org/material-ui/pull/14617

[oliviertassinari]

https://keithjgrant.com/posts/2023/04/transitioning-to-height-auto/ might solve the issue

[rainabozhi]

@oliviertassinari - so have you implemented what is suggested in the link you provided for collapsing accordions now?

[Ozaoujal]

+1 in mui v5.15.13

[oliviertassinari]

To see if we can use calc-size: https://twitter.com/Una/status/1791531167558090920.