animation bug

[miluoshenqiu]

Brother, your card is amazing, but I found a small issue. You can watch the screen recording I uploaded. The circular arc on the left side turns into a square when the switch is activated. Although it's a minor issue, it would be even better if it could be fixed.

ba4579722cc5109ebe53e6e00ba8d31d.mp4

[miluoshenqiu]

The video seems not to be playing. I'll upload a screenshot

[Clooos]

Hi! Do you have any custom styles or modules on these sliders? Also, I was able to see your video. What browser do you use? Have you tried with the HA companion app?

[miluoshenqiu]

It is work OK when i use win10 edge, and when i ues the APP download for Apple APP Store it hanppened（on my iphone 12）.

[Clooos]

Have you updated Bubble Card to v3.1.4? Because I haven't this issue on my side.

[miluoshenqiu]

I am certain that my version is V3.1.4, as I installed Bubble Card from HACS just yesterday.

[Clooos]

The other possibility is that your iPhone isn't running the latest iOS version. This is much likely the reason, I would love to fix this but I haven't any older iOS device to reproduce this.

[miluoshenqiu]

It's indeed possible, because my phone with Android 15 has no issues. The issue arises on the phone with iOS 15.6.

[miluoshenqiu]

it is also hanppen on ipad running ios 15.8

[Clooos]

Can you try to add these custom styles to one of your sliders?

.bubble-container {
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
  -webkit-transform: translateZ(0);
}

Add this in "Styling and layout options" > "Custom styles & JS templates".

[miluoshenqiu]

it works！！thanks！！ 迷失在落寞的深秋，只因你在远方 ---- Replied Message ---- | From | ***@***.***> | | Date | 03/18/2026 03:05 | | To | Clooos/Bubble-Card ***@***.***> | | Cc | miluoshenqiu ***@***.***>, Author ***@***.***> | | Subject | Re: [Clooos/Bubble-Card] animation bug (Issue #2286) | Clooos left a comment (Clooos/Bubble-Card#2286) Can you try to add these custom styles to one of your sliders? .bubble-container { -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); } Add this in "Styling and layout options" > "Custom styles & JS templates". — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[Clooos]

Great! Could you try again without this line:

-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);

So only this:

.bubble-container {
  -webkit-transform: translateZ(0);
}

I'm sure that only one of these 2 lines is required to fix this, can you please check which one it is? This way I will add this fix to Bubble Card directly in the next release 😄

[miluoshenqiu]

it works! only with this:
.bubble-container {
-webkit-transform: translateZ(0);
}

[Clooos]

Perfect! Thank you so much for the feedback, now just wait for the next release 😄

[miluoshenqiu]

Thank you very much for your nice Bubble Card !
By the way , I really like the gradient style in the attached image. It would be perfect if this feature could be added in the next version!