[v3] Safari iOS and Firefox graph is almost not visible and has wrong height

[lrlunin]

Hello,

thank you so much for your efforts. I was recently working on adding a better graph animation like this chartjs/Chart.js#4695 and noticed that the graph on my iPhone (iOS 18.2) is almost not visible.

I have seen this snippet

https://github.com/esphome/esphome-webserver/blob/6cb0eaae1b6ff9e11b5e8e4838ce43d6b0b92e07/packages/v3/src/main.css#L58C1-L65C2

but it seems to not fix the issue.

This how it looks in the Safari:

The same page in the Google Chrome on Windows (resized to iPhone 12 Pro size in the Chrome -> Developer Tools):

Thanks in advance!

[lrlunin]

This issue also appears in both page light and dark theme in WebKit Windows browser.

[lrlunin]

Actually, only Chromium based browsers do render this visible...
In Firefox graph is also almost unreadable.

[lrlunin]

The problem is the :host-context() selector which is no longer supported by Firefox or Safari: https://developer.mozilla.org/en-US/docs/Web/CSS/:host-context

I'll prepare a pull request with the fix.

[MarioTro]

I was wondering for an hour why I don't see a graph. Thanks for pointing out that it is a browser issue and preparing a fix!