[Bug]: Performance hit in animations when UIX is installed

[antonio1475]

My Home Assistant Version

From https://community.home-assistant.io/t/ui-extension-add-css-styles-to-almost-any-part-of-the-home-assistant-ui/989747/200?u=antonio1475

The moment I install UIx (in Devices & Services), animations (eg. bottom sheet more-info dialog) becomes choppy, even on a Macbook Air M4.
I remove it and refresh, back to smooth.

UIX Diagnostics

{
  "home_assistant": {
    "installation_type": "Home Assistant OS",
    "version": "2026.3.1",
    "dev": false,
    "hassio": true,
    "virtualenv": false,
    "python_version": "3.14.2",
    "docker": true,
    "arch": "x86_64",
    "timezone": "Europe/Madrid",
    "os_name": "Linux",
    "os_version": "6.12.67-haos",
    "container_arch": "amd64",
    "supervisor": "2026.02.3",
    "host_os": "Home Assistant OS 17.1",
    "docker_version": "29.1.3",
    "chassis": "embedded",
    "run_as_root": true
  },
  "custom_components": {
    "homeconnect_ws": {
      "documentation": "https://github.com/chris-mc1/homeconnect_local_hass",
      "version": "1.0.4",
      "requirements": [
        "homeconnect-websocket==1.3.6"
      ]
    },
    "webrtc": {
      "documentation": "https://github.com/AlexxIT/WebRTC",
      "version": "v3.6.1",
      "requirements": []
    },
    "samsungtv_smart": {
      "documentation": "https://github.com/ollo69/ha-samsungtv-smart",
      "version": "0.14.5",
      "requirements": [
        "websocket-client!=1.4.0,>=0.58.0",
        "wakeonlan>=2.0.0",
        "aiofiles>=0.8.0",
        "casttube>=0.2.1"
      ]
    },
    "browser_mod": {
      "documentation": "https://github.com/thomasloven/hass-browser_mod/blob/master/README.md",
      "version": "2.9.1-beta.1",
      "requirements": []
    },
    "xiaomi_miot": {
      "documentation": "https://github.com/al-one/hass-xiaomi-miot",
      "version": "1.1.4",
      "requirements": [
        "construct>=2.10.68",
        "python-miio>=0.5.12",
        "micloud>=0.5"
      ]
    },
    "spotcast": {
      "documentation": "https://github.com/fondberg/spotcast",
      "version": "v4.0.1",
      "requirements": [
        "spotipy==2.23.0"
      ]
    },
    "uix": {
      "documentation": "https://uix.lf.technology",
      "version": "5.3.0",
      "requirements": []
    },
    "pirateweather": {
      "documentation": "https://github.com/alexander0042/pirate-weather-ha",
      "version": "1.8.4",
      "requirements": []
    },
    "dreo": {
      "documentation": "https://github.com/jeffsteinbok/hass-dreo/blob/master/README.md",
      "version": "1.6.1",
      "requirements": [
        "websockets"
      ]
    },
    "tuya_local": {
      "documentation": "https://github.com/make-all/tuya-local",
      "version": "2026.3.0",
      "requirements": [
        "tinytuya==1.17.6",
        "tuya-device-sharing-sdk~=0.2.4"
      ]
    },
    "smartir": {
      "documentation": "https://github.com/smartHomeHub/SmartIR",
      "version": "1.18.1",
      "requirements": [
        "aiofiles>=0.6.0"
      ]
    },
    "google_assistant_sdk_custom": {
      "documentation": "https://github.com/tronikos/google_assistant_sdk_custom",
      "version": "0.1.4",
      "requirements": [
        "beautifulsoup4",
        "gassist-text"
      ]
    },
    "hacs": {
      "documentation": "https://hacs.xyz/docs/use/",
      "version": "2.0.5",
      "requirements": [
        "aiogithubapi>=22.10.1"
      ]
    },
    "climate_scheduler": {
      "documentation": "https://github.com/kneave/climate-scheduler",
      "version": "1.15.1",
      "requirements": []
    },
    "xtend_tuya": {
      "documentation": "https://github.com/azerty9971/xtend_tuya",
      "version": "4.3.5",
      "requirements": [
        "tuya-iot-py-sdk==0.6.6",
        "yappi==1.7.3"
      ]
    }
  },
  "integration_manifest": {
    "domain": "uix",
    "name": "UI eXtension for Home Assistant",
    "codeowners": [
      "Lint-Free-Technology"
    ],
    "config_flow": true,
    "dependencies": [
      "websocket_api",
      "http",
      "frontend",
      "lovelace"
    ],
    "documentation": "https://uix.lf.technology",
    "integration_type": "service",
    "iot_class": "local_push",
    "issue_tracker": "https://github.com/Lint-Free-Technology/uix/issues",
    "version": "5.3.0",
    "is_built_in": false,
    "overwrites_built_in": false
  },
  "setup_times": {
    "null": {
      "setup": 0.022385913878679276
    },
    "01KKHCWTNNMRC24MX8T94FZD0G": {
      "config_entry_setup": 0.011018657125532627
    }
  },
  "data": {
    "lovelace": {
      "resource_mode": "storage",
      "resources": {
        "cad0956b0920481ba8ab8a98e41d639c": {
          "url": "/hacsfiles/mini-media-player/mini-media-player-bundle.js?hacstag=14852083811611",
          "type": "module",
          "id": "cad0956b0920481ba8ab8a98e41d639c"
        },
        "0011926fae9443d0a1a7e30e50b19edc": {
          "url": "/hacsfiles/button-card/button-card.js?hacstag=146194325701",
          "type": "module",
          "id": "0011926fae9443d0a1a7e30e50b19edc"
        },
        "a676601ef7c24a22bae241d53427ba03": {
          "url": "/hacsfiles/vacuum-card/vacuum-card.js?hacstag=2612912952120",
          "type": "module",
          "id": "a676601ef7c24a22bae241d53427ba03"
        },
        "17ab4cbf24824661abad18c0084ec65b": {
          "url": "/local/tv-card.js?v=1337",
          "type": "module",
          "id": "17ab4cbf24824661abad18c0084ec65b"
        },
        "cb70c608960a42ad916d2237abf7d13d": {
          "url": "/browser_mod.js?automatically-added&2.9.1-beta.1",
          "type": "module",
          "id": "cb70c608960a42ad916d2237abf7d13d"
        },
        "c243adb29f544fd8a122096dbabc75d5": {
          "url": "/hacsfiles/lovelace-mushroom/mushroom.js?hacstag=444350375511",
          "type": "module",
          "id": "c243adb29f544fd8a122096dbabc75d5"
        },
        "950aa5c0b3644cd9857b802cebe563ad": {
          "id": "950aa5c0b3644cd9857b802cebe563ad",
          "url": "/hacsfiles/swipe-card/swipe-card.js?hacstag=192732887500",
          "type": "module"
        },
        "2d55944f5f4144959d7077fc5e3acda8": {
          "id": "2d55944f5f4144959d7077fc5e3acda8",
          "url": "/hacsfiles/LG-WebOS-Remote-Control/lg-remote-control.js?hacstag=257005990204",
          "type": "module"
        },
        "f305e7eb7c23405ebbc550d746f51f3e": {
          "id": "f305e7eb7c23405ebbc550d746f51f3e",
          "url": "/hacsfiles/mini-graph-card/mini-graph-card-bundle.js?hacstag=1512800620130",
          "type": "module"
        },
        "2184e154815f40209d2fe6fa2897e770": {
          "id": "2184e154815f40209d2fe6fa2897e770",
          "url": "/hacsfiles/weather-chart-card/weather-chart-card.js?hacstag=6655018292411",
          "type": "module"
        },
        "bd073bc045fb43719cf2402ef09aabc0": {
          "id": "bd073bc045fb43719cf2402ef09aabc0",
          "url": "/hacsfiles/stack-in-card/stack-in-card.js?hacstag=248954055020",
          "type": "module"
        },
        "f45d460c8fba4a578fed91aec0e8fd5d": {
          "id": "f45d460c8fba4a578fed91aec0e8fd5d",
          "url": "/hacsfiles/lovelace-expander-card/expander-card.js?hacstag=677140532700",
          "type": "module"
        },
        "446915b724f74dfeacf3da334490c100": {
          "id": "446915b724f74dfeacf3da334490c100",
          "url": "/hacsfiles/custom-card-features/custom-card-features.min.js?hacstag=698501153483",
          "type": "module"
        },
        "17dbe4efe2d74f4f8b783390ea242911": {
          "id": "17dbe4efe2d74f4f8b783390ea242911",
          "url": "/hacsfiles/lovelace-layout-card/layout-card.js?hacstag=156434866247",
          "type": "module"
        },
        "c54a015141444014a29f7c37810bf58e": {
          "id": "c54a015141444014a29f7c37810bf58e",
          "url": "/climate_scheduler/static/climate-scheduler-card.js?v=1.15.1",
          "type": "module"
        },
        "8b00c1c3a4ab470cb734f28c1f4e9f19": {
          "id": "8b00c1c3a4ab470cb734f28c1f4e9f19",
          "url": "/hacsfiles/lovelace-more-info-card/more-info-card.js",
          "type": "module"
        },
        "62767711d5df4362a217bf319f0959d4": {
          "id": "62767711d5df4362a217bf319f0959d4",
          "url": "/uix/uix.js?v=5.3.0",
          "type": "module"
        }
      }
    },
    "frontend_extra_module_url": [
      "/uix/uix.js?v=5.3.0",
      "/browser_mod.js?2.9.1-beta.1",
      "/hacsfiles/iconset.js"
    ]
  },
  "issues": []
}

Thank you 🫶

My UIX installation method

HACS

My lovelace configuration method

GUI

What I am doing

Opening more-info dialogs on mobile with the new bottom sheet from 2026.3

What I expect to happen

Smooth opening of the new bottom sheet, like when UIX is not installed.

What happened instead

The bottom-sheet open animation is choppy. Video in https://community.home-assistant.io/t/ui-extension-add-css-styles-to-almost-any-part-of-the-home-assistant-ui/989747/200?u=antonio1475

Minimal steps to reproduce

1. Install UIX
2. Refresh
3. Open a more-info dialog on an iPhone 11 (Native, standard one not even themed with uix at a theme or card level.

Include any yaml code here

None used

Error messages from the browser console

uix.js?v=5.3.0:1 💡 UIX 5.3.0 IS INSTALLED 💡
browser_mod.js?2.9.1-beta.1:611 BROWSER_MOD 2.9.1-beta.1 IS INSTALLED    BrowserID: Macbook Air (Chrome)
vacuum-card.js?hacstag=2612912952120:4  VACUUM-CARD  2.12.0
button-card.js?hacstag=146194325701:50  BUTTON-CARD  v7.0.1 
lg-remote-control.js?hacstag=257005990204:272   LG WebOS Remote Control Card    version: v2.0.4  
mini-graph-card-bundle.js?hacstag=1512800620130:1  MINI-GRAPH-CARD  0.13.0 
mushroom.js?hacstag=444350375511:61 🍄 Mushroom 🍄 - 5.1.1
stack-in-card.js?hacstag=248954055020:200  STACK-IN-CARD    Version 0.2.0   
layout-card.js?hacstag=156434866247:1 LAYOUT-CARD 2.4.7 IS INSTALLED
swipe-card.js?hacstag=192732887500:19    SWIPE-CARD   Version 5.0.0 
custom-card-features.min.js?hacstag=698501153483:231  CUSTOM-CARD-FEATURES-FOR-TILES-AND-MORE v4.8.3
custom-card-features.min.js?hacstag=698501153483:7  HA-NUNJUCKS v1.7.4
more-info-card.js:36 MORE-INFO-CARD 1.2.0 IS INSTALLED 
index.ts:28   Expander-Card  Version 7.0.0

By checking each box below I indicate that I ...

• Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
• Have made sure I am using the latest version of the integration.
• Have searched Home Assistant logs for any relevant UIX errors or warnings.
• Understand that failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[dcapslock]

I note in your video that there seems to be an extra dialog scrim effect. Di you have any custom theme installed that may engaging a mod once Uix is installed? If not I am puzzled by what may be creating this. Could be a change to backdrop root which, or just an extra backdrop, both which could impact animation.

[antonio1475]

I note in your video that there seems to be an extra dialog scrim effect. Di you have any custom theme installed that may engaging a mod once Uix is installed? If not I am puzzled by what may be creating this. Could be a change to backdrop root which, or just an extra backdrop, both which could impact animation.

Interesting. I just deleted the themes folder, reloaded themes, restarted HA, refreshed the app. Same result 😅 It also happens in the native, unedited Overview/Lights/Security/etc dashboards, as well as with any confirmations, etc. Overall all animations 🤔

I mean it could be just the iPhone 11 updated to the horrible iOS 26 being borderline OK without UIX and then UIX adding a tiny bit of overhead enough for this animation to slug...

Happy to troubleshoot if you want to look into possible performance optimizations (assuming it's not an issue on my specific setup), but I also understand if it's due to an old device. I t's not the end of the world and I should be getting an upgrade soon anyway :)

[dcapslock]

Did you mention before that you also notice this on M4 Mac? I ask as I wonder if it is not performance based but based on how the bottom sheet animates. It has a bounce animation to bounce back up if not dragged below 50% of height, then also a close animation. It could be that you do see thus more on slower devices. How Uix makes it more perceptible I am not sure. However I would like to confirm all your observations to know where to concentrate any review I do. Thank you.

[antonio1475]

I thought I did when I posted the comment, but now I can't per se. So either I was wrong or my laptop was running more apps at the time (it was).

I tried CPU throttling with a custom theme (below) and it does show something, although I'm not sure if it's the same. But it might give you some hint as to what is going on. I can't reproduce it with the default theme.

Screen.Recording.2026-03-15.at.20.14.58.1.mp4

Trace-20260315T201244.json

Custom theme to make them auto size:

---
antonio:
  card-mod-theme: "antonio"
  border-radius: "20px"
  ha-card-border-radius: "var(--border-radius)"
  ha-card-border-color: "rgb(0 0 0 / 5%)"
  ha-card-border-width: "1px"
  uix-more-info-yaml: |
    .: |
      ha-adaptive-dialog {
        --ha-bottom-sheet-height: auto !important;
      }
      
    
  modes:
    light:
      ha-card-border-color: "rgb(0 0 0 / 5%)"
  
    dark:
      ha-card-border-color: "rgb(255 255 255 / 4%)"

😄

[dcapslock]

There may be something going on. It may be to do with the opaque borders interaction with the animation.

You note that it does not happen with default theme which shows that there is no general performance issue. As such I have marked this as issue unclear.

[antonio1475]

There may be something going on. It may be to do with the opaque borders interaction with the animation.

You note that it does not happen with default theme which shows that there is no general performance issue. As such I have marked this as issue unclear.

Sorry, I meant that I can't reproduce what you see on the last video (Chrome dev tools with CPU throttling), which may or may not be the same issue, with the default theme because with the default theme, the dialog height is the default one.

I do have the issue on the default theme on the iPhone 11 (original video and previous messages). :)

[dcapslock]

It’s still unclear what the issue may be, or perhaps different issues.

First it would seem that adjusting the bottom sheet height may give animation issues, performance or otherwise, but the only connection to Uix is that it’s setting the height. If you could set the bottom sheet height another way, then you may likely see the same issue.

As for the iPhone 11, it’s likely just a response to the style being added in real time. Uix has to wait for any element it is styling to complete its render such that it can add uix-node where styles are placed. So if a device is just a bit slower then perhaps the adjusted of style happens a bit later and thus appears to stutter.

As per original discussion I don’t expect this to be a performance issue so the issue remains unclear. Perhaps you can try turning off animation on the iPhone which will set reduced motion for bottom sheet which puts transitions at 1ms. Otherwise bottom sheet transition is hardcoded to 350ms