Display error of Frigate Proxy in Home Assistant app

[Damian411]

Versions
Frigate Proxy Add-on version: 1.5
Home Assistant iPhone App 2024.12.2

Home Assistant OS 14.1 (amd64 / qemux86-64)
Home Assistant Core: 2024.12.5
Home Assistant Supervisor: 2024.12.0
Frigate 0.14.1-f4f3cfa

Describe the problem you are having
I have just installed the Frigate Proxy addon and it basically works perfectly. However, there is a display error with Frigate in the iPhone Home Assistant app that makes Frigate hardly usable in the app. When I open Frigate in the sidebar of the Home Assistant app, everything is fine. If I click on the reviews icon within Frigate, the page opens as expected and everything is still correct (see first screenshot). However, if I now click on one of the videos, the entire Frigate page moves up behind the Home Assistant header, so that the upper part of the video is cut off and the icons in the lower part hang “in the air” at a distance from the bottom (see second screenshot). This error can only be fixed if I open another page in the Home Assistant app and then open Frigate again. As soon as I click on a video under Reviews, the display error occurs again.

This error is reproducible. I think Frigate is a very good solution and would like to use it. I support the further development and elimination of this error. Can I provide any information here so that this error can be fixed?

first screenshot:

second screenshot:

[NickM-27]

This is an issue in home assistant specifically due to the way the iframe works, if frigate is connected to directly or in a pwa this doesn't occur

[Damian411]

After troubleshooting, I noticed another correlation that might allow Frigate to solve the problem, regardless of the root cause.

In the meantime, I have installed the normal Frigate as an add-on (not Frigate Proxy) in Home Assistant and hoped that there might be a better integration. And yes, a slightly different issue occurs here. Only videos that are 30 minutes or older (time displayed at the bottom left of each video) show this issue after clicking. With all videos that are up to “29m ago”, this issue does not occur. If I click on a video with e. g. "25m ago", this issue doesn't occurs. If I click back and then on a video with "32m ago" below the first one, the issue occurs. It is reproduceable.

What is different from the 30th minute onwards in the web view?
Can this somehow be applied to all videos so that this issue no longer occurs for any video?

[broyuken]

Same issue for me, would love to see a solution

[jploo]

Alright, so I did some digging and I think this is an issue with either Safari or with how smooth scrolling is implemented in the npm package scroll-into-view-if-needed.

I can reproduce this issue by just wrapping the Frigate UI in a html page with nothing but a fullscreen iframe and opening it on my iPhone.

If I change the scrolling behavior from "smooth" to "auto" wherever it is used, the issue goes away. I forked the repo and tried it here: https://github.com/jploo/frigate/tree/smooth-scroll-setting. I don't know if this is the correct approach, and I am not at all familiar with this codebase so this probably isn't merge-ready, but maybe somebody can make something of it or guide me in the right direction.