My dashboard renders fine on desktop and mobile Safari, but it renders with the small tile graph from webcore taking over the entire screen when viewed through the Hubitat iOS app.
Anyone have any thoughts on this?
I did some more troubleshooting and narrowed this down.
The same tile renders normally in the Hubitat iOS app when it displays a plain attribute such as the graph’s last-updated time. The problem occurs only when it displays webCoRE’s graph_no_title attribute.
That attribute is generated as roughly:
<style>.tile-primary{height:100%}</style>
<iframe
style="width:100%; height:100%;"
src="http://HUB-IP/apps/api/.../graph/?access_token=..."
data-fs="false"
onload="...attach dblclick handler for fullscreen...">
</iframe>
A few tests:
- Custom dashboard CSS is definitely loading in the iOS app. For example, changing
#tile-0’s background works. #tile-5 { display:none !important; }does not hide the graph in the app.#tile-5 * { display:none !important; }does not hide it.- Even
iframe { display:none !important; }does not hide it. - Those selectors work as expected in desktop Chrome and mobile Safari.
- Changing tile 5 to display a normal text attribute makes the dashboard render correctly in the app.
This makes it appear that the Hubitat iOS app is handling or rendering the iframe outside the normal dashboard DOM/WebView layout. The iframe then fills the app’s dashboard area, so dashboard CSS cannot constrain it.
I also confirmed that manually editing graph_no_title is not a practical workaround because it is a generated webCoRE attribute. Editing it broke the endpoint until I rebuilt the webCoRE graph tile.
Is this a known issue with iframe content inside Attribute tiles in the iOS app? Is there a way to prevent the app from promoting or separately rendering the iframe?