Juddering UI due to scroll bar

[deosrc]

Describe the bug

The UI is constantly adding and removing the scroll bar which is causing a juddering:

(This is actually happening much faster but the frame rate of the GIF reduced the effect)

Version of frigate

0.9.0-46fe06e

Config file
Include your full config file wrapped in triple back ticks.

    mqtt:
      host: mqtt
      user: frigate
      password: '{FRIGATE_MQTT_PASSWORD}'
    hwaccel_args:
      - -c:v
      - h264_v4l2m2m
    detectors:
      cpu1:
        type: cpu
      cpu2:
        type: cpu
      cpu3:
        type: cpu
    objects:
      track:
        - person
        - vehicle
        - animal
    record:
      enabled: true
      retain_days: 0
      events:
        enabled: true
        objects:
          - person
          - vehicle
          - animal
        retain:
          animal: 3
    birdseye:
      enabled: false
    cameras:
      front:
        ffmpeg:
          inputs:
            - path: 'rtsp://frigate:{FRIGATE_CCTV_PASSWORD}@cctv/Streaming/Channels/101'
              roles:
                - rtmp
                - detect
                - record
        detect:
          width: 768
          height: 432
          fps: 2
        motion:
          mask:
            - 14,19,14,42,218,42,218,19 # Timestamp
      side:
        ffmpeg:
          inputs:
            - path: 'rtsp://frigate:{FRIGATE_CCTV_PASSWORD}@cctv/Streaming/Channels/201'
              roles:
                - rtmp
                - detect
                - record
        detect:
          width: 768
          height: 432
          fps: 2
        motion:
          mask:
            - 14,19,14,42,218,42,218,19 # Timestamp
      garden_1:
        ffmpeg:
          inputs:
            - path: 'rtsp://frigate:{FRIGATE_CCTV_PASSWORD}@cctv/Streaming/Channels/301'
              roles:
                - rtmp
                - detect
                - record
        detect:
          width: 768
          height: 432
          fps: 2
        motion:
          mask:
            - 14,19,14,42,218,42,218,19 # Timestamp
        objects:
          track:
            - person
            - animal
      garden_2:
        ffmpeg:
          inputs:
            - path: 'rtsp://frigate:{FRIGATE_CCTV_PASSWORD}@cctv/Streaming/Channels/401'
              roles:
                - rtmp
                - detect
                - record
        detect:
          width: 768
          height: 432
          fps: 2
        motion:
          mask:
            - 14,19,14,42,218,42,218,19 # Timestamp
      shed:
        ffmpeg:
          inputs:
            - path: 'rtsp://frigate:{FRIGATE_CCTV_PASSWORD}@cctv/Streaming/Channels/501'
              roles:
                - rtmp
                - detect
                - record
        detect:
          width: 768
          height: 432
          fps: 2
        motion:
          mask:
            - 14,19,14,42,218,42,218,19 # Timestamp

Frigate container logs

Include relevant log output here

Frigate stats

Output from frigate's /api/stats endpoint

FFprobe from your camera

Run the following command and paste output below

ffprobe <stream_url>

Screenshots
If applicable, add screenshots to help explain your problem.

Computer Hardware

• OS: [e.g. Ubuntu, Windows] Pop!_OS
• Install method: [e.g. Addon, Docker Compose, Docker Command] Kubernetes
• Virtualization: [e.g. Proxmox, Virtualbox] N/A
• Coral Version: [e.g. USB, PCIe, None] None
• Network Setup: [e.g. Wired, WiFi] Wired

Camera Info:

• Manufacturer: [e.g. Dahua] Hikvision DVR
• Model: [e.g. IPC-HDW5231R-ZE]
• Resolution: [e.g. 720p] 720p
• FPS: [e.g. 5]

Additional context
Add any other context about the problem here.

Information from browser developer tools:

html tag computed size is flicking between 1920x883 and 1908x886
width and height attributes on <canvas data-testid="comeraimage-canvas"> seem to be flicking between 528x297 and 532x299 for all cameras (same models so expected that the values would match).

[sinamics]

Can you confirm if this flickering stops if you zoom in or out in the browser?

[deosrc]

Can you confirm of this flickering stops if you zoom in or out in the browser?

Yes that's correct. It is only present at 100% zoom level. It also disappears if I manually set a width on the HTML tag, even if that value is one of those above (1920 or 1908).

My best guess based on the way it is reacting is that it is something related to how it is sizing the canvas once it has the first frame of the video feed(s?). This causes it to expand off the bottom of the page and need the scroll bar. When the scroll bar appears, it then resizes to maintain the aspect ratio and fit 3 feeds side by side which then reduces the size of the elements so that it doesn't need the scroll bar any more so removes it. Then repeat...

Just happens to be that my maximised browser dimensions and video aspect ratios perfectly align to cause this.

[ozett]

my jiggering went away after resizing the browserwindow
ver DEBUG 0.9.0-46FE06E

[sinamics]

@deosrc @ozett
Im able to reproduce this behavior.
I belive this is related to the calculated availableWidth from the ResizeObserver.

frigate/web/src/components/CameraImage.jsx

Line 13 in bddde74

const [{ width: availableWidth }] = useResizeObserver(containerRef);

I will do some more testing the next days and hopefully provide a PR.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[deosrc]

Didn't realise this had gone stale. Still an issue in 0.9.4.

[alexelite]

Same issue here. 0.9.4-26AE608

[scaytrase]

Still an issue here :( 0.11.1 (stable)

[mkaatman]

It needs scrollbar-gutter stable applied.

https://css-tricks.com/almanac/properties/s/scrollbar-gutter/

[NickM-27]

Fixed for 0.12

[gooselord-0]

Seeing this Issue in 0.11.1-2EADA21

[NickM-27]

Seeing this Issue in 0.11.1-2EADA21

Right, it is fixed in 0.12