Missing page elements on wake or return to app

Configuration Frontend
1

I have this really annoying issue that has been present for coming up on two years, and I just can’t figure it out. I filed an issue on GitHub but didn’t really get any help so I’m hoping someone here can help me. I wish I could upload a brief video, but what’s happening in these pics is that when the 2018 iPad Pro that I’m using as my kiosk wakes (motions sensor alert to HK in guided access), or if I’m using a different app and then come back to the HA app (or Safari or Chrome), large and variable parts of the page including random elements like the knobs on sliders and header icons are missing or covered by gray boxes. Touch the screen and everything goes back to normal. That’s all… very annoying though for a kiosk. None of this worked:

  • Deleting all custom components, folders and even HACS itself
  • Rewriting/tinkering with the landing page yaml
  • Turning on/off seemingly related Safari experimental features (also all on & off)
  • Inspecting elements on a laptop (which I’m not good at)

Of note, the same issue happens on a separate 12.9" iPad Pro. Unlike what I posted on Github the issue happens on all mobile browsers, not just the companion app (but they all use webkit under the hood so no surprise there).

Any help is appreciated… this has been driving me crazy.

1
11920×1440 183 KB

2
21920×1440 173 KB

3
31920×1440 197 KB

Server: Core-2022.2.5, Python 3.9.10 in VENV, MacOS 12.2.1
iPad: iOS 15.3
Companion app: 2022.2 (2022.345)

2

If anybody finds this and feels like helping, this is STILL occurring. With each iOS update it changes a little but it never goes away. It has to be something with the way the frontend is interacting with Webkit that is different on an iPad Pro than other tablets… there have to be a few other users out there using iPad Pros??