iPad companion app has problems with SVG/Icons, where iPhone and Safari have no problems at all!

[AmoebeLabs]

iOS device model, version and app version

iPhone, NO problems:
Model Name: iPhone Xs Max
Software Version: 14.1 & 14.2
App version: 2020.7 (11)

iPad, Problems:
Model Name: iPad Pro (12.9 inch) (4th gen)
Software Version: 14.1 & 14.2
App version: 2020.7 (11)

Home Assistant Core Version

Home Assistant Core 0.117.6

Describe the bug
The bug does NOT exist on Safari and the iPhone, not on Safari on the iPad, but only on the iPad companion app!.

The svg icons are all over the place. Seems like something is wrong only with svg based objects. The normal html based cards have no problems with icons for instance.

To Reproduce

Expected behavior
iPad displays cards the same as mobile safari and the iPhone.

Screenshots
Icons are very large and all over the place, except where they should be...
Icons should be in the black circles:

Icons should not be over the air quality card of course:

Additional context

I have reinstalled the app on the iPad several times, I also did a reset of the cache. Nothing helps.

So the question is: what is different between the iPad and iPhone version of the companion app. This weird bug makes the iPad app useless.

[TomBrien]

Is that a custom card, if so which one? Can you share the configuration of the card so we can try to recreate?

[AmoebeLabs]

It is a custom-card and not yet released.

However, I see the same problems with the flexible horseshoe card, and as I'm sure that one worked, I did a quick test on my old iPad with iOS 12 and Home Assistant Companion 2.0.0 (69), and there it simply works!

So the same custom-card with the same hass installation & configuration works correctly with HAC 2.0.0, but has all sorts of SVG positioning problems on HAC 2020.7 (11), and that only on the iPad, not on Safari & my iPhone with HAC 2020.7 (11).

I will post screenshots & configuration later...

[AmoebeLabs]

I just found the problem 😄

Due to Safari not implementing web standards correctly (some of the bugs are only 9 years old), I need separate rendering paths for Safari and any other browser.

Now it seems that this detection does NOT work on the latest/current HAC. If I force the iOS/Safari rendering path, all my SVG problems are gone!

Detection:

    // Safari is the new IE.
    // Check for iOS / iPadOS / Safari to be able to work around some 'features'
    // Some bugs are already 9 years old, and not fixed yet by Apple!
    //
    // Detection from: http://jsfiddle.net/jlubean/dL5cLjxt/
    //
    this.isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);
    this.iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

So something has changed, as the previous HAC version did announce itself as iOS/Safari in its user agent.

As I can't debug iOS or Safari, I can't check what is happening exactly.

[TomBrien]

User Agent for the current app on iOS 14.2 will be:

Mozilla/5.0 (iPhone; CPU iPhone OS 14_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Home Assistant/2020.7 (io.robbie.HomeAssistant; build:11; iOS 14.2.0) Mobile/HomeAssistant, like Safari

[TomBrien]

Just checked the UA on my 14.2 iPad and it doesn't contain iPad but does still contain Safari

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Home Assistant/2020.7 (io.robbie.HomeAssistant; build:11; iOS 14.2.0) Mobile/HomeAssistant, like Safari

[AmoebeLabs]

Thanx.

I will check my detection algorithm.

Already found on the internet that the iPad is gone, and now detected as an Intel Mac, just as you found out!

But the weird thing is that it still contains Safari, so either one of them should return true...

Will report back if I'm able to solve this issue.

[AmoebeLabs]

I have modified the detection for all my cards now, and it seems to work on iPhone & iPad, both on Safari and HAC.

I also realize now how I missed that change in iPad OS 13: I was still using hass 0.89 in combination with an old HAC version, and the latest hass only on Safari!

Since my SSD crashed last week in the NUC running hass, I did not install the old hass anymore, so automatically started using the latest HAC on my iPad, and since it is an iPad specific change, it has become clear why my iPhone never showed these problems 😄

The small change in HAC's UA compared to Safari 'killed' my detection algorithm. And that has been fixed now!

Thanx Tom for the help.

Marco.