Clooos / Bubble-Card

Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.
MIT License
1.45k stars 39 forks source link

Performance improvement: add transition-delay to backdrop #456

Closed hellomarb closed 2 months ago

hellomarb commented 2 months ago

I experienced some browser rendering hiccups with the current backdrop transition which is a combination out of a transformed popup and the backdrop and opacity transition in the background.

An improvement would be adding a transition-delay to .bubble-backdrop in the popup/styles.ts:

transition-delay: 0.1s;

So the browser don't have to blur the whole viewport and animate the transition, the animations are run much smoother on my iPhone to M1 and M2 Pro Macs in latest Chrome engines.

Clooos commented 2 months ago

Good to know! I will change that in the next beta. Thank you!

Clooos commented 2 months ago

I've released a new beta with your fix! Thanks again!

https://github.com/Clooos/Bubble-Card/releases/tag/v2.0.0-beta.2