Abnormal changes in transparency of service tags

[lutinglt]

Description

When my mouse hovers over a service tag, it causes a change in the transparency of other tags

Please ignore the flicker in the GIF and pay attention to the right half of the middle column. In fact, throughout the entire process, other columns are also changing

My customized CSS only changed the font

* {
    font-family: 'Maple Hand';
}

homepage version

v0.10.3

Installation method

Docker

Configuration

No response

Container Logs

No response

Browser Logs

Chrome 131.0.6778.205
Firefox 134.0b10

Troubleshooting

There are only two nested layers, one is 4 rows and the other is 5 rows,
This phenomenon was observed during testing from v0.10.1 to v0.10.3

[shamoon]

I dont really know what's happening here but I cant reproduce it and it hasn't been reported.

Perhaps try paring back the settings (background blur etc) and see if anything helps)

4485.mov

[shamoon]

Still no issues for me with backgrounds, including with filters

4485_2a.mov

4485_2b.mov

[lutinglt]

After experimentation, it was found that triggering occurs only when the columns of two layers are different. This effect becomes more pronounced when cardBlur is set to xl.

cardBlur: xl
layout:
  Group1:
    header: false
    style: row
    columns: 4
    App:
      header: false
    Tool:
      header: false
    DataService:
      header: false
    Manage:
      header: false
  Group2:
    header: false
    style: row
    columns: 5
    Monitor:
      header: false
    Data:
      header: false
    Service1:
      header: false
    Service2:
      header: false
    DevService:
      header: false

[shamoon]

Still nothing. If you're up for it, post your entire services + settings yaml?

4485_3.mov

4485_3b.mov

[lutinglt]

I removed the section about links and widgets

services.yaml

---
# For configuration options and examples, please see:
# https://gethomepage.dev/

- Group1:
    - App:
        - Jellyfin:
            icon: /icons/high/Jellyfin_B.png
            server: my-docker
            container: jellyfin
        - PhotoPrism:
            icon: /icons/high/Photoprism_A.png
            server: my-docker
            container: photoprism
        - Komga:
            icon: /icons/high/Komga_A.png
            server: my-docker
            container: komga
    - Tool:
        - Files:
            icon: /icons/files.png
            server: my-docker
            container: files
        - Blinko:
            icon: /icons/blinko.png
            server: my-docker
            container: blinko
        - Git:
            icon: /icons/high/Git_A.png
            server: my-docker
            container: git
        - Mail:
            icon: /icons/png/poste.png
            server: my-docker
            container: mail
    - DataService:
        - Superset:
            icon: /icons/high/Superset_A.png
            server: my-docker
            container: superset
        - Airflow:
            icon: /icons/high/Airflow_B.png
            server: my-docker
            container: airflow
        - OpenMetadata:
            icon: /icons/high/Open-metadata_A.png
            server: my-docker
            container: openmetadata
        - SelectDB WebUI:
            icon: /icons/high/Selectdb_A.png
            server: my-docker
            container: selectdb
    - Manage:
        - Grafana:
            icon: /icons/high/Grafana_A.png
            server: my-docker
            container: grafana
        - Portainer:
            icon: /icons/high/Portainer_B.png
            server: my-docker
            container: portainer
        - qBittorrent:
            icon: /icons/high/Qbittorrent_A.png
            server: my-docker
            container: qbittorrent

- Group2:
    - Monitor:
        - Scrutiny:
            icon: /icons/high/Scrutiny_A.png
            server: my-docker
            container: scrutiny
        - UptimeKuma:
            icon: /icons/high/Uptimekuma_B.png
            server: my-docker
            container: uptimekuma
        - AdGuard:
            icon: /icons/high/Adguard_A.png
            server: my-docker
            container: adguard
        - Prometheus:
            icon: /icons/high/Prometheus_A.png
            server: my-docker
            container: prometheus
    - Data:
        - Doris FE:
            icon: /icons/high/Doris_A.png
            server: my-docker
            container: fe
        - Doris BE:
            icon: /icons/high/Doris_A.png
            server: my-docker
            container: be
        - MinIO:
            icon: /icons/high/Minio_C.png
            server: my-docker
            container: minio
        - Lakekeeper:
            icon: /icons/high/Lakekeeper_A.png
            server: my-docker
            container: lakekeeper
        - IcebergCatalog:
            icon: /icons/high/Iceberg_A.png
            server: my-docker
            container: iceberg
        - Postgres:
            icon: /icons/high/Postgresql_A.png
            server: my-docker
            container: postgres
        - ElasticSearch:
            icon: /icons/high/Elastic_B.png
            server: my-docker
            container: elastic

    - Service1:
        - Glances:
            icon: /icons/glances.png
            server: my-docker
            container: glances
        - Nexus:
            icon: /icons/nexus3.png
            server: my-docker
            container: nexus
        - NGINX:
            icon: /icons/high/Nginx_A.png
            server: my-docker
            container: nginx
        - Clash:
            icon: /icons/high/Clash_B.png
            server: my-docker
            container: clash
        - MTProto:
            icon: /icons/high/Telegram_B.png
            server: my-docker
            container: mtproto
        - OAuth2Proxy:
            icon: /icons/high/Oauth2proxy_A.png
            server: my-docker
            container: oauth2-proxy

    - Service2:
        - Syncthing:
            icon: /icons/high/Syncthing_A.png
            server: my-docker
            container: syncthing
        - Vaultwarden:
            icon: /icons/high/Bitwarden_A.png
            server: my-docker
            container: vaultwarden
        - AppDB:
            icon: /icons/high/Postgresql_B.png
            server: my-docker
            container: appdb
        - Samba:
            icon: /icons/png/windows-11.png
            server: my-docker
            container: samba
        - Homepage:
            icon: /icons/high/Homepage_B.png
            server: my-docker
            container: homepage
        - NodeExporter:
            icon: /icons/high/Prometheus_B.png
            server: my-docker
            container: nodeexporter

    - DevService:
        - Ingestion:
            icon: /icons/high/Open-metadata_A.png
            server: my-docker
            container: ingestion
        - Container:
            icon: /icons/high/Debian_A.png
            server: my-docker
            container: container
        - Runner:
            icon: /icons/high/Docker_D.png
            server: my-docker
            container: runner
        - Code:
            icon: /icons/high/Vscode_C.png
            server: my-docker
            container: code
        - Jupyter:
            icon: /icons/png/jupyter.png
            server: my-docker
            container: jupyter
        - GitHub:
            icon: /icons/high/Github_A.png
            server: my-docker
            container: github

settings.yaml

---
# For configuration options and examples, please see:
# https://gethomepage.dev/en/configs/settings

language: zh-CN
headerStyle: boxed
hideVersion: true
hideErrors: true
theme: dark
color: slate
showStats: true
statusStyle: dot
cardBlur: xl
disableCollapse: true
fiveColumns: true
background:
  image: /icons/paper/bg.png
layout:
  Group1:
    header: false
    style: row
    columns: 4
    App:
      header: false
    Tool:
      header: false
    DataService:
      header: false
    Manage:
      header: false
  Group2:
    header: false
    style: row
    columns: 5
    Monitor:
      header: false
    Data:
      header: false
    Service1:
      header: false
    Service2:
      header: false
    DevService:
      header: false

[shamoon]

Appreciate you posting, but still:

4485_4_1080.mov

4485_4b_1080.mov

[shamoon]

I wonder if this is all because youre making too many requests at once and the machine youre on is re-painting too slow

[lutinglt]

But it is not available in version 0.9, and when all nested layers are the same, this effect will also disappear. I think we can replace it with the same container to check the effect, and then slide from the leftmost to the middle, top to right to check

[lutinglt]

Your guess should be correct. I found that this phenomenon was triggered when the mouse switched from one layer to another. I used the same movement trajectory, but the mouse's movement speed was slower, so this phenomenon was not triggered

[lutinglt]

I don't quite understand the principle of front-end. The request for container status should have been completed when the page is opened, and mouse movement should only trigger the animation of individual service cards

[shamoon]

Homepage uses the popular nextjs framework (which itself is built on react), so we don’t really control the minutiae of things like hydration etc. I assume this is just a bit too much for your client side machine

See https://bluesockets.com/next/hydration/