Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Graphical glitch when viewing Network map on Safari

Chiusa
  • Qualcosa non va?
#1,116 11 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
55/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Ambito
frontend

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.
Lingua principale
Python
Stelle
7.2k
Fork
456
Merge medio
16h 25m
PR unite (30g)
30

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di netalertx/NetAlertX

Tutte le issue di netalertx/NetAlertX

Issue simili

Altre issue su Python

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.