Groups management page renders with oversized enabled slider on MAC OSX / Safari 17.6

pi-hole / web

Pi-hole Dashboard for stats and more

https://pi-hole.net

Other

2.02k stars 561 forks source link

Groups management page renders with oversized enabled slider on MAC OSX / Safari 17.6 #3150

Open krilupo opened 2 weeks ago

krilupo commented 2 weeks ago

Versions

root@pihole-test:~# pihole -v Core Version is v5.18.3-505-g65806a9 (Latest: null) Branch is development Hash is 65806a90 (Latest: 65806a90) Web Version is v5.21-978-g0a3dec52 (Latest: null) Branch is development Hash is 0a3dec52 (Latest: 0a3dec52) FTL Version is vDev-cb8e8b0 (Latest: null) Branch is development Hash is cb8e8b06 (Latest: cb8e8b06)

Platform

OS and version: Debian 12.7
Platform: Linux pihole-test 6.8.12-1-pve #1 SMP PREEMPT_DYNAMIC PMX 6.8.12-1 (2024-08-05T16:17Z) x86_64 GNU/Linux

Expected behavior

it renders correctly on a Chrome 129.0.6668.60 on MAX OSX

Actual behavior / bug

the slider enabled button is displayed in enormous size.

Steps to reproduce

Steps to reproduce the behavior:

Go to pi-hole web admin page
Click on groups in the side bar

Screenshots

Additional context

Add any other context about the problem here.

krilupo commented 2 weeks ago

Browser user agent for misbehaviour is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15

rdwebdesign commented 2 weeks ago

I saw this happening a few times, but it wasn't easily reproducible.

What happens if you reload the page?

krilupo commented 2 weeks ago

Just did a quick check: when I hit reload then it still persists. I can make it display the correct way when I clock on the big green enabled rectangle. That way it get's obviously disabled but this is shown in the correct way. Also selecting just another number of to be selected list items (e.g. 25) makes it the correct way. Here it is always reproducible :-)

rdwebdesign commented 2 weeks ago

Do you see the same issue using a different browser?

When it happens, do you see any error messages on the browser's console (devtools)?

krilupo commented 2 weeks ago

(1) Chrome (MAC OSX) -> displayed correctly (2) Firefox (MAC OSX) -> displayed correctly (3) Safari (MAX OSX) -> displayed wrongly (4) Edge (Win 10) -> displayed correctly

Unfortunately I am in no way a modern ui web page developer, however I opened the delevoper tools in (1) - (3) and did some screenshot (with annotations). Interesting are the issues reported by Chrome (see screenshot) and the page load timeline of Safari, where one can see that the page is rendered up to a certain point correctly and the field is blown up an filled in green (because the group switch is in enabled position)

(3) safari page load timeline screenshots

krilupo commented 2 weeks ago

Ahh sorry - screen shot at the top is chrome, middle is Firefox, bottom is safari