Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Graphical glitch when viewing Network map on Safari

Open
  • Is something wrong?
#1,116 11 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
55/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Domain
frontend

Research direction

Start by reproducing the issue in Safari on the Network page and comparing the map with a working browser. Find the Network map rendering entry point and inspect how device names and diagram lines are positioned. Done means the map and labels display correctly in Safari and the reported iOS/WebKit cases.

Written by the indexing model from the issue text.

Description

bug 🐛 frontend 🖌️ next release/in dev image 🚀
Is there an existing issue for this?
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.

Image

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):
Image

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

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.

Image

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.
Dominant language
Python
Stars
7.2k
Forks
456
Avg merge
17h 59m
Merged PRs (30d)
26

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from netalertx/NetAlertX

All issues in netalertx/NetAlertX

Similar issues

More Python issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.