question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Juddering UI due to scroll bar

See original GitHub issue

Describe the bug

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

ezgif-3-5caf3e5970de

(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).

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:1
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

4reactions
sinamicscommented, Aug 30, 2021

@deosrc @ozett Im able to reproduce this behavior. I belive this is related to the calculated availableWidth from the ResizeObserver. https://github.com/blakeblackshear/frigate/blob/bddde74c06806552188772f8c3cc1d1bfa583ff1/web/src/components/CameraImage.jsx#L13

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

0reactions
scaytrasecommented, Nov 11, 2022

Still an issue here 😦 0.11.1 (stable)

Read more comments on GitHub >

github_iconTop Results From Across the Web

More Elegant Fix for Jumping Scrollbar Issue - CSS-Tricks
A classic fix was html { overflow-y: scroll; } to force the scrollbar all the time.
Read more >
How to make Windows 11's new auto-hiding scrollbar thicker?
The way (most of the time) to make the scroll bar thicker is to hover over it. Hovering over the scroll bar exposes...
Read more >
How to avoid Flickering div due to show and hide scrollbar on ...
I am showing a scroll bar on mouse hover and it makes a flicker effect in UI. Can anyone suggest how to avoid...
Read more >
Why is my scrollbar not working? - Unity Answers
Hi! i am building a GUI System with a list of elements. To scroll this list i need a scrollbar. Therefore i have...
Read more >
Scrollbar Guidelines | Wireframing Academy - Balsamiq
A double scroll happens when you have a scrollbar on a container as well as a scrollbar on the page as a whole....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found