[Bug]: Frigate Proxy Home Assistant App

[sebastian-tischer]

Describe the problem you are having

Hi team,

with the most current version of Frigate (14) and the Frigate Proxy in Home Assistant I have the issue of strange screen behavior when playing a video.

As you see, it pushes the screen of Frigate up and don't show the whole content.

Is this a known bug or can I help to solve it?

Warm regards
Sebastian

Steps to reproduce

In iOS Home Assistant app click on review > select a video and it moves the screen uü

Version

0.14.0-da913d8

Frigate config file

-

Relevant log output

-

Operating system

UNRAID

Install method

Docker Compose

Network connection

Wired

Camera make and model

Any other information that may be helpful

Home Assistant Frigate Proxy

[hawkeye217]

This was reported once in the beta phase, and there was no further activity on the discussion and we weren't able to reproduce it.

It's likely related to the frame introduced by HA. What iOS version are you running?

[hawkeye217]

We'll try to find a way to reproduce it here, it may just take a bit. But if you're good with tailwind css and the Safari web inspector, feel free to dig in :)

[sebastian-tischer]

Hm... I would love to say yes... 🤣 I will try nevertheless :)

[hawkeye217]

How are you accessing the proxy? Are you going through the HA app or a browser?

Edit: sorry - you mentioned that it was the HA app in your title. Can you try it in Safari directly?

[hawkeye217]

This is what it looks like on Apple's iOS simulator when accessing HA through Safari and clicking on the proxy from the HA sidebar.

[sebastian-tischer]

I just tried in Safari, and have the same issue.

In the app it is quite random - I thought that the first 3 shown images open fine, and the 4th only partly visible image pushes the frame up. But in web safari it happens with all of the images unfortunately.

[hawkeye217]

Interesting. Does it only happen with full recordings view? And is it camera-specific?

[sebastian-tischer]

I access via the Review button in the bottom bar and then direct click on the image/recording

[hawkeye217]

Thanks. Since you said it's always reproducible on Safari, I've been trying there without luck. Not sure we'll be able to fix this if we can't reproduce it, unfortunately.

If you access Frigate directly without the proxy on port 5000, can you confirm the issue goes away?

[sebastian-tischer]

Interesting - no issues at all there 🤣 So it is the combination of Proxy with Home Assistant indeed

When use the ip directly for frigate all fine

[hawkeye217]

Yeah. This is likely something with the way Home Assistant is handling the frame. It's even more difficult to diagnose if it's intermittent. If this turns out to be an issue for more users, we can revisit and see if we can get the HA iOS folks involved. But for now, I don't think there's anything we can do.

One advantage of accessing directly is the top "Frigate Proxy" bar is removed, so you have more available screen space for Frigate. It looks even better when you add it to your home screen, it feels like a native iOS app.

[sebastian-tischer]

Thats a nice idea 😄 I just put it on the home screen - great 👍

[cjb1975]

I have the same issue as @sebastian-tischer using Safari on iPhone/iPad (access directly works fine). I can live with it but for your information.

[hawkeye217]

Thanks for letting us know. Since the other devs and I can't reproduce the issue and it does appear to be Home Assistant related, we'll need as much assistance from the community as we can get to try to figure out what's happening.

[hawkeye217]

@cjb1975 Can you post a screenshot of what this looks like on iPad?

[hawkeye217]

I'm going to reopen this. I wasn't able to reproduce it yesterday, but today, without any settings or code changes, I can see the issue occurring on my iOS simulator.

It does seem to be either Webkit or HA-related, and may not be something we can work around. But at least we can reproduce it.

[hawkeye217]

Alright, thanks. Exactly what I'm seeing too. Should be able to find a fix then. Keep your fingers crossed 🤞

[sebastian-tischer]

Always will 😀 if I need to test a beta just tell me

[jriggit]

Did a fix ever get developed for this? I just got frigate set up and have been having the same issue. Happy to beta test if there is something but no worries if not!

[hawkeye217]

No, this is an issue with Home Assistant and iOS. We've done a lot to try to work around the issue, and we've been unsuccessful.

[jriggit]

Thank you - at least this helps me understand what’s going on when this happens, and will help me know what to look for in future bug fixes.

[sesardelaisla]

Hello,

Just came here to ask whether this issue is still being tracked, as it is set as "closed". Just saying because it is still happening. This is how I see it in my iPhone 14 Pro Max.

First Settings menu (General) is displayed fine. However, the screen is shifted a bit as you navigate from left to right on the settings nav bar. Debug and users are almost 100% hidden.

Apart from this, I just realized that if you switch to another app when the frame is shifted and switch back to Home Assistant, the Frigate page you are at is suddenly framed correctly:

Frigate.Screen.Frame.Shift.mp4

Hope this feedback helps for the purpose of fixing this issue when able. Thanks!

[NickM-27]

Like it says in the answer we have no known way of fixing this and it appears to be something specific with the home assistant iOS app and webkit.

[jriggit]

Adding to this - I found that uninstalling and reinstalling the homeassistant app fixed this issue for a couple days for me. Over time it gradually got worse like before - now it happens every time I open a camera stream.

not the answer you wanted, but it’s a temporary fix - if anyone stumbles on a homeassistant iOS app thread that I could follow this issue, please post it here and maybe it will help redirect traffic that ends up in this thread!

[sesardelaisla]

I think zigbee2mqtt manager works as a frame too. However, this issue does not happen there. I understand that perhaps nav bars are not coded in the same way so it is not fair to compare them. Just saying in case it helps for reference. In the meantime, I will just live with it. Thanks!

[hawkeye217]

I've spent several hours on this issue, including completely rewriting the way Frigate renders the entire page. Everything renders perfectly on desktop browsers, Android mobile browsers, iOS PWA, and even iOS standalone browsers. The issue comes when the HA iOS app includes its header and height calculation logic for the content in the iframe. No matter what code Frigate uses, the HA iOS app always miscalculates.

Since switching to another app and then back to the HA app fixes it, that indicates that the issue lies somewhere with Webkit on iOS or in the way the HA app is calculating the height.

[hawkeye217]

There's been some recent discussion about this on Reddit recently. What users have said there confirms that this is even more likely to be a HA companion iOS app/Webkit bug.

As I indicated last year, I've spent several hours rewriting Frigate's code to work around this issue without success.

Until Apple and/or HA can provide a fix, users have suggested these workarounds:

1. Rotate the screen – Rotating the device can correct the UI shift, but it causes a reload.
2. Zoom in and out – Pinching to zoom in and back out can reset the UI positioning.
3. Switch to another app and back – Exiting the HA app and reopening it realigns the UI.
4. Click the Frigate UI's Settings cog and dismiss the menu – Opening the settings menu (bottom right) and then tapping outside of it restores the UI position.

[hawkeye217]

A user has indicated that the bug originally reported in this issue has been fixed by my timeline refactor PR. This is currently available in the dev branch and will be a part of Frigate 0.16.