Graphical glitch when viewing Network map on Safari

[Calvorejas]

Is there an existing issue for this?

• I have searched the existing open and closed issues and I checked the docs https://jokob-sk.github.io/NetAlertX/

The issue occurs in the following browsers. Select at least 2.

• Firefox
• Chrome
• Edge
• Safari (unsupported) - PRs welcome
• N/A - This is an issue with the backend

Current Behavior

Hi,

By the title of Safari's checkbox ("Safari (unsupported) - PRs welcome") when creating this issue, I can understand that this may probably be a known issue, and perhaps, will not be addressed in the long term, but I'll report it anyways.

When going into the "Network" section, when the network map is displayed, using Safari (in this case on macOS) causes that map to be drawn incorrectly, as shown in my screenshot, all the names seem to be going to the top left corner. All the spaces where the names for each device should be displayed are blank.

Some of the details have been omitted for privacy and security reasons.

This also happens on iPhone and iPad, on iPhone (iOS) it looks even worse, since it draws the diagram lines inverted, the names remain the same... All of them displayed at the top left corner of the space where the diagram is displayed. And since Chrome for iOS/iPadOS seems to still be using WebKit, the same happens on Chrome when using any of those OSs.

Screenshot for Safari on iOS (iPhone 16):

Screenshot for Chrome on iOS (WebKit) (iPhone 16):

Again, for both pictures, some of the details have been omitted for privacy and security reasons.

As said previously, I don't have much hopes of this getting fixed anytime soon as for the "unsupported" flag in Safari's checkbox, but still wanted to report this in hopes that this gets addressed in the future and ends up working fine on Safari... For the absolute rest of the functions of NetAlertX, everything seems to be working perfectly fine so far... I've been able to configure every detail of my network from Safari and everything works flawlessly... It's just that Network diagram that is not working for me.

In case this also helps in any way (I doubt it) I'm using NetAlertX on a Docker Container in my UGREEN NAS.
Thanks in advance.

Expected Behavior

When going into the "Network" section, when the network map is displayed, using Safari (in this case on macOS, but also happens in iPadOS and iOS) the map should be displayed correctly. All the names for each device and diagram lines correctly arranged.

Sorry again for the grey blocks in the screenshot above, but I wanted to hide the names for all my devices for privacy and security reasons. I hope you all understand.

Steps To Reproduce

1. Setup NetAlertX normally (in my case, using Docker Compose) and configure all (if possible) of your network details for devices to be shown in the network diagram.
2. Open Safari on any device... A Mac, an iPhone, an iPad, heck, even an iPod Touch if you would like, the sky is the limit, and obviously go to your NetAlertX local IP address.
3. In NetAlertX, go to "Network" in order to admire your network diagram.
4. Enjoy.

app.conf

docker-compose.yml

services:

  netalertx:
    image: jokobsk/netalertx:latest
    container_name: netalertx
    volumes:
      - ./config:/app/config
      - ./db:/app/db
    environment:
      - TZ=Europe/Madrid
    network_mode: host
    restart: unless-stopped

What installation are you running?

Production (netalertx)

app.log

No response

Debug enabled

• I have read and followed the steps in the wiki link above and provided the required debug logs and the log section covers the time when the issue occurs.

[jokob-sk]

Hi @Calvorejas ,

As you already pointed out, this is a known issue. As far as I know that's an issue with the graphical library that is used. This is not something that is easy to fix.

I do appreciate the in-depth description and effort that went into creating the issue, regrettably, this is something that is not easy to rectify. I also don't own any apple hardware to test this, so if someone else has an idea and time to fix it, I'm more than happy to accept a PR.

I leave this issue open for a couple of weeks to see if there is any interest.

Thanks for using NAX,
j

[tsunarmy]

Hello.
I have the same issue: using Safari (macOS, iPadOS and iOS) the map isn’t displayed correctly.
Sad to read that it won’t be fixed but I understand the problem isn’t easy to solve.
Best regards
tsun

[jokob-sk]

Hi @tsunarmy ,

It might be fixed in the future by someone else, just not me as I don't own Apple hardware.

If you can code, feel free to submit a PR if you know how to fix it, (DEV env setup guide can be found in the docs)

Thanks a lot in advance.

[tsunarmy]

Hi @tsunarmy ,

It might be fixed in the future by someone else, just not me as I don't own Apple hardware.

If you can code, feel free to submit a PR if you know how to fix it, (DEV env setup guide can be found in the docs)

Thanks a lot in advance.

Hi. I unfortunately don't have the skills...

[jokob-sk]

All good. As an alternative you can also switch to Firefox which I think is available in the Apple ecosystem.

[tsunarmy]

All good. As an alternative you can also switch to Firefox which I think is available in the Apple ecosystem.

Yes on MacOS I can use Firefox but not on iOS nor in the Home Assistant app.
After trying NetAlertX maj to solve the problem, I finally test the map page on Firefox and it works. I previously test Safari and Brave with no issue.
I found this thread after.
Best regards
tsun