Safari & iOS (Home Assistant App) Rendering Issues

[martydingo]

Hiya, first of all thanks for this, it's a nice component to interact with floorplans.

I am having some issues regarding rendering the menu on safari & iOS devices, specifically both within Chrome, and on the HA app itself. I suspect Chrome may use Safari's webkit.

I've been able to get the following error to reproduce whenever I attempt to open the honeycomb menu via a click:

TypeError: Illegal constructor
(anonymous function) — typography.js:181
close — honeycomb-menu.js:290:647

I've hunted about and seen potential issues regarding Polyfill on Safari & iOS devices.

This really impacts my usage of honeycomb, and if this cannot ever work on iOS devices or safari, then I'm without a menu system as it stands for my floorplan.

Many thanks!

[Sian-Lee-SA]

Simply put, iOS and Apple in general has the ideology of having locked down systems and that things should be filtered through their own engines, this would also include browser apps on their devices. There are no plans on getting this to work on iOS as I don't develop for their web engines as I simply don't use or have iOS devices to test on. With that said, Chrome is the only browser I use and test on regarding projects like these (which also tends to work on oher similar browsers with the same engine).

I also noticed that you commented on a previous issue that references a duplicate issue which in turn explains what I'm repeating here. It's not an "issue" in the form of needing to be "fixed", it's simply just not supported. If it happens to work on iOS because they updated their engines then great but I still don't support iOS, Safari or MAC.

You are always free to fork this code if you know a bit of JS and tweak to how you see fit to get working on Apple products.

[Sian-Lee-SA]

As you'll see here https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet, until iOS safari supports this class then it will always error. It's also astounding how every other browser has officially supported this class but Apple has failed to implement it.

[martydingo]

I honestly just think limiting the support to just Windows & Android devices is problematic.

It's also astounding how every other browser has officially supported this class but Apple has failed to implement it.

Not particularly, there'll be a reason. Remember Apple also implements draft RFCs before they are standardized if they have a vested interested (see DoH & HTTPS/SVCB queries made), so potentially there's a security issue with the implementation.

Also, I don't see any errors in terms of CSS and I do use terms like @import on a Mac through Safari, e.g. Tailwind CSS.

[martydingo]

I also don't agree with how you close issues that are still affecting people, however that is your prerogative. But I did get misled down this path to spend multiple days and incur a lot of technical debt, because there isn't even a warning on your README.md that iOS and Safari isn't supported.

[Sian-Lee-SA]

"This is still in alpha stages and has only be used and tested in chrome. Please expect errors and bugs otherwise you will be overly frustrated & disappointed!"

This is stated right near the start of the readme... The error also explicitly states the constructor which is the method that isn't implemented.

[Sian-Lee-SA]

Leaving an issue open that is not going to be fixed or worked on is just leaving zombie issues scattered around. I am sorry that it doesn't work for you for using Apple products but as stated above, there is nothing stopping you from forking this repo and tweaking to fit your needs.

[martydingo]

"This is still in alpha stages and has only be used and tested in chrome. Please expect errors and bugs otherwise you will be overly frustrated & disappointed!"

Honestly, an addition of "Furthermore, there has been recent issues raised on the usage of Honeycomb on iOS devices, and using Safari on Mac OS, reporting that this does not work. Here be dragons" isn't very hard.

The error also explicitly states the constructor which is the method that isn't implemented.

Okay, I went looking through the code here for imports of Typography, and I went through hunting online for possible causes for a while. I have read, and re-read this README, and the fact I got this far and hit this wall isn't good user experience. This isn't the only UX issue either, for example, I had to dive into your code to work out where to put the honeycomb_menu_templates directive, as it wasn't that clear whether this should be within the view's lovelace YAML, or the root of the lovelace configuration, e.g as a root key in ui-lovelace.yaml. Things could always be improved and I don't understand why you don't want to try and improve this.

Thanks though, I do appreciate you have put a lot of effort in thus far.

[Sian-Lee-SA]

I'm going to be completely honest. This module was something I created because it's something I wanted personally (I guess that's generally how or why most things are created). There was initially no intention to make public because I didn't want to code for something which required constant maintanance as such for something like this. It was published mainly because it was request after people have seen it's use in forums and YouTube etc. I wanted to make it clear that this is not a "highly" developed plugin (which is also why it's stayed in alpha status for so long).

To further emphasise this, I never even bothered to write the plugin in TypeScript because it was just simply something I just wanted up and running for personal needs at the time and couldn't be bothered setting up a dev environment for it. This is also why I stress that it's only tested on Chrome and that I'm not bothering with other browesers etc. This project really isn't worth my time atm for something like that. But I choose to make this open and let people have their way with it but to cover all boundries, I did want people to understand that it's Alpha and that they may be frustrated and dissapointed because I simply only whiped it up for a single browser and to a lesser exent OS. Furthermore, I didn't even bother reinventing the wheel and rely on external cards like Custom Button Card which is just me being lazy about it (error's can also be caused by this card which is out of Honeycomb Menu's control).

If I did this initially with it setup properly and intended for public release then my attitude would be different inregards to what it supports and tackling issues more aggressively. But this isn't the case for this plugin.

The templates was loosely documented intentially because it's a more advanced feature and something that was coded for my own personal needs (even before made public). But you're right I think I failed to mention where to place the code and this is an oversight (will update readme to reflect this).

So the dilemma is, never open it up to the public and keep it personal but have people requesting it over and over or just open it up and let people have their way while also encouraging for people to tailor for their own needs etc. I chose the latter.

Also Typography is generally a stack trace which isn't the underlying problem.

[Sian-Lee-SA]

While on the subject, I also wasn't even 100% sure why it wouldn't work on iOS (still not in some regards but the CSSStyleClass is enough evidence) but again I don't have iOS to test or confirm things. But when checking that class and what browsers supported it, it was really only Chrome and a couple of other minor browsers (Firefox didn't even support it) so I was suprised to see all browsers support this now (well most) so the initial "Tested on Chrome" would cover all those basis.

I also didn't and still don't know if iOS browsers downloaded from their app store allows them to use their own engine so theoretically I assume a new browser would eliminate the whole OS issue (Android allows this in developer options).

My distance and lack of understanding about iOS and Mac's doesn't allow me to make definitive answers and how this plugin operates on them. I also can only asume that it's a matter of time til the class is supported which could be tomorrow, weeks or months but I'm sure it will be implemented eventually and in return allows Honeycomb Menu to work also. This is also a problem with me stating that it explicitly doesn't work with iOS when it could work as stated tomorrow but I would never know, so anyone who then reads that would no longer try it and would never be discovered to be working on iOS when infact it does,

So having said all this, I do apologise if things weren't clear and that it's not currently fitting your needs but I do understand and hope my comment gives you a bit of insight as to how and why.

[martydingo]

I understand, alas I try to keep everything free and try to provide some help with some of the stuff I've contributed I've the years, I do relate with it being a personal project. I wasn't really reporting it to be fixed, but more so to try and understand more on the problem.

I'm not totally knowledge with safaris developer console, and while I have TypeScript / JavaScript knowledge, I guess I haven't run into this before to understand where to debug it.

I've done some UI code before, my main experience is more in other languages and overall, more in operations then development, so I appreciate the information.

[martydingo]

I also didn't and still don't know if iOS browsers downloaded from their app store allows them to use their own engine so theoretically I assume a new browser would eliminate the whole OS issue (Android allows this in developer options).

I have tried and I have the same symptoms on Chrome, Firefox and Safari as I do on Safari on Mac OS, but not on Chrome or Firefox on Mac OS.

I'll try and do further digging in the code, again any useful technical information you've come across relevant to the issue would be appreciated.

[Sian-Lee-SA]

The code you'll be interested in is honeycomb-menu-item.js line 170. You can remove this and add the sizes manually to the card which should get you pass the inital contructor problem but I can't offer further info for the land of unknown to me (iOS) if further issues arise with that OS otherwise it would be a back forward headache trying to debug things (I work and debug better with direct interaction).

After making anychanges, just recompile the code and ensure you do a hard refresh (this isn't anything to do with the plugin, it's just how HA works with their caching).

[Sian-Lee-SA]

I just checked the recent browser compatibility for iOS and Safari with classes and methods being used, if anyone want's to try and report if it's now working on iOS etc then I can rule that out for future issues