Juddering UI due to scroll bar
See original GitHub issueDescribe 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).
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:8 (2 by maintainers)
Top GitHub Comments
@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#L13I will do some more testing the next days and hopefully provide a PR.
Still an issue here 😦 0.11.1 (stable)