Collapse animation is jittery in Firefox Android (preview and live)

[Noisycall]

As the title suggests, the collapse animation is jittery on firefox mobile, both the preview and live builds.

I have tested this on two devices and both have the same issue.

Here is a link to the JS Bin

This code is taken straight from the Bootstrap Demos, along with some lorem ipsum to simulate page content.

[XhmikosR]

Firefox for Android is, unfortunately, so bad in performance. Even their latest Beta, which has improved performance, is still not as smooth as Chromium based browsers.

That being said, right now, we transition height .35s ease, which is known to not have the best performance because the GPU isn't used.

I'm not sure we can do anything, but patches are welcome.

CC @twbs/css-review in case you have any ideas.

[ffoodd]

Did anyone try to use will-change for collapses? It's supported by Firefox for Android: not quite sure it'd improve the result, but that may worth a try.

• will-change on MDN
• Can I Use will-change

@Noisycall may you try the following pen, please: https://codepen.io/ffoodd/pen/NWxGEQQ ?

[XhmikosR]

I don't want to use will-change TBH. I'd rather use one of the properties that work pretty well when transitioned.

[N8n5h]

may you try the following pen, please: https://codepen.io/ffoodd/pen/NWxGEQQ ?

I'm not OP, but I have the same problem and the performance still is a bit jittery even with will-change

I'm not sure we can do anything, but patches are welcome.

Maybe using transforms? https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108

[XhmikosR]

Maybe using transforms? https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108

Well, yeah, that's what I mean with properties that work well when transitioned :)

[Noisycall]

Hello, sorry I haven't checked this thread in a while.

I have used transform and transition's before, but I'm not sure how I would apply that to the inbuilt bootstrap implemention.

Maybe using transforms? https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108

Well, yeah, that's what I mean with properties that work well when transitioned :)

[XhmikosR]

Yeah, it's not so easy to make the change but we should definitely look into it.

[XhmikosR]

This might help: https://css-tricks.com/performant-expandable-animations-building-keyframes-on-the-fly/