Skip to content

[web] /explore flickers in Firefox #20829

@gabrielsoldani

Description

@gabrielsoldani

I have searched the existing issues, both open and closed, to make sure this is not a duplicate report.

  • Yes

The bug

In the /explore page, there's usually a single row of People. As you resize the window, faces are added or removed according to the available space, always filling exactly one row.

In Firefox 141.0.3 (aarch64, macOS 15.6), as you increase the width of the window, at some point it decides to display a new person earlier than it's possible to fit in a single row, and for a single frame, two rows are displayed (one fully populated with faces, and the second one with a single face).

On the next frame, it reverts back to displaying the correct number of faces. On the next frame, it tries again. It repeats, flickering, until you change the window width back to a "stable" point.

The same thing happens with the "Places" row, but on different widths.

This does not seem to happen on Chrome or Safari.

The OS that Immich Server is running on

Ubuntu 24.04.2

Version of Immich Server

v1.137.3

Version of Immich Mobile App

v1.137.3

Platform with the issue

  • Server
  • Web
  • Mobile

Your docker-compose.yml content

services:
  immich-server:
    image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release}
    depends_on:
      - redis
      - postgres

    # Health
    restart: unless-stopped
    healthcheck:
      disable: false

    # Network
    ports:
      - '2283:2283'

    # Persistence
    volumes:
      # Do not edit the next line. If you want to change the media storage location on your system, edit the value of UPLOAD_LOCATION in the .env file
      - upload-location:/data
      - /etc/localtime:/etc/localtime:ro

    # Environment
    environment:
      DB_HOSTNAME: postgres
      DB_USERNAME: ${DB_USERNAME}
      DB_PASSWORD: ${DB_PASSWORD}
      DB_DATABASE_NAME: ${DB_DATABASE_NAME}
      REDIS_HOSTNAME: redis
      TZ: ${TZ:-Etc/UTC}

  immich-machine-learning:
    # For hardware acceleration, add one of -[armnn, cuda, rocm, openvino, rknn] to the image tag.
    # Example tag: ${IMMICH_VERSION:-release}-cuda
    image: ghcr.io/immich-app/immich-machine-learning:${IMMICH_VERSION:-release}

    # Health
    restart: unless-stopped
    healthcheck:
      disable: false
    
    # Persistence
    volumes:
      - ${MODEL_CACHE_LOCATION}:/cache

  postgres:
    image: ghcr.io/immich-app/postgres:14-vectorchord0.4.3-pgvectors0.2.0@sha256:5f6a838e4e44c8e0e019d0ebfe3ee8952b69afc2809b2c25f7b0119641978e91

    # Health
    restart: unless-stopped

    # Persistence:
    volumes:
      # Do not edit the next line. If you want to change the database storage location on your system, edit the value of DB_DATA_LOCATION in the .env file
      - ${DB_DATA_LOCATION}:/var/lib/postgresql/data

    # Environment
    environment:
      POSTGRES_PASSWORD: ${DB_PASSWORD}
      POSTGRES_USER: ${DB_USERNAME}
      POSTGRES_DB: ${DB_DATABASE_NAME}
      POSTGRES_INITDB_ARGS: '--data-checksums'
      # Uncomment the DB_STORAGE_TYPE: 'HDD' var if your database isn't stored on SSDs
      # DB_STORAGE_TYPE: 'HDD'
    shm_size: 128mb

  redis:
    image: docker.io/valkey/valkey:8-bookworm@sha256:facc1d2c3462975c34e10fccb167bfa92b0e0dbd992fc282c29a61c3243afb11

    # Health
    restart: unless-stopped
    healthcheck:
      test: redis-cli ping || exit 1

volumes:
  upload-location:
    driver_opts:
      type: cifs
      device: "${UPLOAD_LOCATION_SHARE}"
      o: "username=${UPLOAD_LOCATION_USERNAME},password=${UPLOAD_LOCATION_PASSWORD},vers=3.0"

Your .env content

DB_DATA_LOCATION=/mnt/container_data/immich/postgres/data
IMMICH_VERSION=v1.137.3
DB_PASSWORD=redacted
DB_USERNAME=redacted
DB_DATABASE_NAME=redacted
UPLOAD_LOCATION_SHARE=//redacted/immich
UPLOAD_LOCATION_USERNAME=redacted
UPLOAD_LOCATION_PASSWORD=redacted
TZ=America/Sao_Paulo
MODEL_CACHE_LOCATION=/mnt/container_data/immich/immich-machine-learning/model-cache

Reproduction steps

  1. Open the /explore page on Firefox.
  2. Make sure the height of the window is long enough to fit both the "People" and "Places" rows, but not too long, such that an extra row on either the "People" or "Places" section would cause the window to overflow and display a scrollbar.
  3. Change the width of the window until it barely fits 1 more person.

Relevant log output

Additional information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions