Poor performance in Safari with long lists of items

[abrahamvegh]

Deployment Type

Self-hosted

NetBox Version

4.0.8

Python Version

3.11

Steps to Reproduce

1. Access any long list of items (reproducible for me on the demo instance, example)
2. Scroll the list

Expected Behavior

The list should scroll as performantly as it did prior to 4.x, with no stuttering and without hanging the browser. The browser scroll bar should update with the scroll position.

Observed Behavior

Screenshot below has part of the story, but there's just some really strange performance issues with lists that cause my browser (non-beta Safari on non-beta macOS, latest) to hang when scrolling, but also to hang when I switch from another tab back to the tab with the list in it.

I’ve been seeing this since 4.x with the UI refresh, haven't had time to write it up until now/was hoping somebody else was running into this and it would get solved, but it seems like it's ongoing. 😅

[jeremystretch]

This is a known issue with the Safari browser; the issue has not been reproducible in Chrome or Firefox.

If you would like to propose a specific change in NetBox to work around the bug in Safari we're happy to try it.

[coelho]

@jeremystretch I'm not sure we can conclude that until the issue is diagnosed.

Netbox may for example have a bug that is causing excess manipulations to the DOM that, sure, other browsers play nice with performance-wise, but is still unintentional behavior indicative of a bug in Netbox itself or one of it's dependencies. Consider as well that many Javascript libraries have different behavior for different browsers.

*Anecdotally, Netbox is the first website in 2 years that I have had Safari performance issues.

[jeremystretch]

@coelho would you like to volunteer to investigate this issue?

[coelho]

@jeremystretch It may be more efficient from someone who has an understanding of the frontend UI code. I might give it a stab via process of elimination if I have more time, but Safari developer tools were not useful from my initial investigation.

[abrahamvegh]

@jeremystretch please assign this to me, it drives me nuts, I will investigate to the best of my abilities.

[jeremystretch]

@abrahamvegh this issue cannot be assigned for work until a bug in NetBox itself has been confirmed. So far, no one has been able to point to a specific change in NetBox that would likely resolve the issue. (Again, this issue is only reproducible in Safari.)

[coelho]

@jeremystretch @abrahamvegh Issue is resolved on my end by applying the following CSS:

.table-responsive {
    overflow-x: visible !important;
}

Additional Notes
The bug is caused by the dropdown-toggles inside the table-responsive, and the use of transform in their CSS:

.table-responsive {
    overflow-x: auto;
}
.dropdown-toggle:after {
    transform: rotate(-45deg);
}

I did not test if there are more variables that cause this bug to occur, but I did test that if you remove either CSS, the performance issues are resolved. I settled on removing overflow-x: auto;, as it seems to have no functional impact besides a minor cosmetic change.

[jeremystretch]

Thanks for tracking that down @coelho. I'll open this up for anyone who would like to work on it and can confirm that it fixes the issue in Safari.

it seems to have no functional impact besides a minor cosmetic change.

What is the cosmetic change?