Frontend: Cards Title not shown correctly in iOS

[deluxestyle]

Home Assistant release with the issue:
0.81.6

Last working Home Assistant release (if known):
not known

Browser and Operating System:
iOS 12.1

Description of problem:
From time to time the header/title of cards are not shown correctly in iOS

a reload helps

Javascript errors shown in the web inspector (if applicable):

Additional information:

[balloob]

Try disabling all your custom cards and try again.

[deluxestyle]

I disabled all custom cards but it happened again

[bieniu]

column-card and old layout-card versions cause this. Update the layout-card and clear the browser cache.
Look here https://community.home-assistant.io/t/lovelace-column-card/62039/28

[deluxestyle]

column-card and old layout-card versions cause this. Update the layout-card and clear the browser cache.
Look here https://community.home-assistant.io/t/lovelace-column-card/62039/28

I only have "mini-media-player" as custom card. no other.

[bieniu]

Open HA page in the browser with incognito mode. If the title style is correct then the problem is the browser cache.

[deluxestyle]

Open HA page in the browser with incognito mode. If the title style is correct then the problem is the browser cache.

I did it already a few times.
I forgot to mention that it seems to happen only in the iOS App. In Safari I don't see the problem.

I deleted the app already and installed it new. But no change

[iantrich]

@deluxestyle you must have https://github.com/thomasloven/lovelace-column-card if you're getting that error. Please share your configuration

[deluxestyle]

@deluxestyle you must have https://github.com/thomasloven/lovelace-column-card if you're getting that error. Please share your configuration

I do not have lovelace-column-card
You can find my configuration on github
https://github.com/deluxestyle/Home-AssistantConfig

[fillwe]

Have the exact same issue, but i don't get any errors in the log whatsoever. I don't have column card installed either. Running beta of the iOS app and this also happens to me in the app webframe on my iPad which is used as a dashboard (webframe also uses the safari engine ofc).

[VDRainer]

Looks like i'm responsible for the false error message. Raised in the moment when refreshing the iOS app.
Sorry for the confusion. :grin:
I see the same issue.
Card Headers look normal, switching a view tabs and then the Headers are small.

[deluxestyle]

I just removed the „false error“. Sorry for the confusion

[fillwe]

I've started getting spammed with this in the logs, could it be the cause of the issue? Can't really tell what it means, any help?

frontend_latest/app-79696026.js:1211:25571 TypeError: this.detached is not a function. (In 'this.detached()', 'this.detached' is undefined)

[deluxestyle]

I don't have any error in my logs and it happens only on iOS.

[fillwe]

Yeah same here, have tried clearing cache and removing all lovelace code except a single standard entities card, still happens...

[deluxestyle]

Is there a way to help to solve this issue?
I'm using home assistant mainly on my iPhone and there it is a little bit annoying

[fillwe]

No change in 0.83.1. I'm going nuts trying to figure out the cause of this, have tried finding similarities with @deluxestyle setup but nothing that I can see their either. Anyone experiencing this in safari on desktop #2068 that could see if there is any errors in the web inspector?

[Ernst79]

I have the same issue with Chrome on the iPad. It suddenly happens and after a refresh it’s gone for a short while. But it keeps coming back. Clearing cache doesn’t help.

[fillwe]

Chrome on iPad is still using the Safari/webkit engine so that's not that strange. Just tried booting up my old Mac, got the same bug in safari there but no errors in the web inspector. This is only happening with entities cards for me though, same for you others?

[deluxestyle]

Yes. Happens only on entities cards

[Ernst79]

It happens for entities cards, but also the light cards are affected. For the light cards, the button on the circular brightness slider changes to a small square and the circular line disappears.

[Mariusthvdb]

I've started getting spammed with this in the logs, could it be the cause of the issue? Can't really tell what it means, any help?

frontend_latest/app-79696026.js:1211:25571 TypeError: this.detached is not a function. (In 'this.detached()', 'this.detached' is undefined)

I have this exact error since using the animated custom-weather card for Lovelace:

log complaining about:

2018-12-05 14:26:50 ERROR (MainThread) [frontend.js.latest.201811033] https://domain_redacted/frontend_latest/app-79696026.js:1211:25571 TypeError: this.detached is not a function. (In 'this.detached()', 'this.detached' is undefined)

inspector posting to this line in .js file:

` this.content.innerHTML = ``

[fillwe]

Problem still on 0.84.1, moved my lovelace to the storage option, adapted my cards for the ui editor, cleared cache but the same problem seems to persist

[ArgoHA]

Still on 0.84.2

[Ernst79]

Issue is still there on 0.85.

[Ernst79]

I think this can be closed, no more issues since (I think) 0.87