Poor performance in Safari with long lists of items #10069

@coelho commented on GitHub (Aug 11, 2024):

@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.

@coelho commented on GitHub (Aug 11, 2024): @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.

adam commented

@jeremystretch commented on GitHub (Aug 11, 2024):

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

@jeremystretch commented on GitHub (Aug 11, 2024): @coelho would you like to volunteer to investigate this issue?

adam commented

@coelho commented on GitHub (Aug 13, 2024):

@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.

@coelho commented on GitHub (Aug 13, 2024): @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.

adam commented

@abrahamvegh commented on GitHub (Aug 13, 2024):

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

@abrahamvegh commented on GitHub (Aug 13, 2024): @jeremystretch please assign this to me, it drives me nuts, I will investigate to the best of my abilities.

adam commented

@jeremystretch commented on GitHub (Aug 13, 2024):

@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.)

@jeremystretch commented on GitHub (Aug 13, 2024): @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.)

adam commented

@coelho commented on GitHub (Aug 22, 2024):

@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.

@coelho commented on GitHub (Aug 22, 2024): @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-toggle`s 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.

adam commented

@jeremystretch commented on GitHub (Aug 22, 2024):

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?

@jeremystretch commented on GitHub (Aug 22, 2024): 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?

adam commented

@coelho commented on GitHub (Aug 22, 2024):

@jeremystretch

Before (with `overflow-x: auto;`):

After (with `overflow-x: visible;`):

@coelho commented on GitHub (Aug 22, 2024): @jeremystretch ### Before (with `overflow-x: auto;`): ![cwoEnIUito=](https://github.com/user-attachments/assets/45653de8-c586-4f4b-a056-d535af6e93dc) ![rvU5SNZCGScO5AJK3RZQvByKhYs=](https://github.com/user-attachments/assets/8c042228-d39e-4089-b18f-f4d3e607bce2) ### After (with `overflow-x: visible;`): ![O8I=](https://github.com/user-attachments/assets/77641d1e-1e19-429e-822b-6d5646304c82) ![yajXPVLT0e2dKU1RjdN7UwHeLPQ=](https://github.com/user-attachments/assets/4259080a-ad23-4ba9-a467-dfdb529c478f)

adam commented

@jeremystretch commented on GitHub (Aug 22, 2024):

Ha, ok. So that's not what I'd call a minor cosmetic change; I'd call that broken. Seems like we've identified the root cause but we'll need to come up with a workable fix.

Also:

.dropdown-toggle:after {
    transform: rotate(-45deg);
}

I've not dug into the CSS yet, but it's not clear to me what purpose this bit serves. If it contributes to the bug, it can likely be negated without any ill effects.

@jeremystretch commented on GitHub (Aug 22, 2024): Ha, ok. So that's not what I'd call a minor cosmetic change; I'd call that broken. Seems like we've identified the root cause but we'll need to come up with a workable fix. Also: ``` .dropdown-toggle:after { transform: rotate(-45deg); } ``` I've not dug into the CSS yet, but it's not clear to me what purpose this bit serves. If it contributes to the bug, it can likely be negated without any ill effects.

adam commented

@abrahamvegh commented on GitHub (Aug 22, 2024):

Amazing work @coelho, I couldn’t figure this out at all!

Validating your fix, just disabling the transform was enough to solve the obvious performance issues for me on Safari.

The only oddity I noticed as a result was the navigation dropdowns were no longer rotated 45 degrees, but overall this seems like a pretty simple fix, and makes logical sense to me.

@abrahamvegh commented on GitHub (Aug 22, 2024): Amazing work @coelho, I couldn’t figure this out at all! Validating your fix, just disabling the transform was enough to solve the obvious performance issues for me on Safari. The only oddity I noticed as a result was the navigation dropdowns were no longer rotated 45 degrees, but overall this seems like a pretty simple fix, and makes logical sense to me. <img width="1728" alt="Screenshot 2024-08-22 at 9 37 51 AM" src="https://github.com/user-attachments/assets/84e785f1-42e1-4484-aa2b-778aa7e59895">

adam commented

@arthanson commented on GitHub (Aug 22, 2024):

@abrahamvegh can you please take a look at PR #17246 and try the fix to see if it addresses the performance issue for you?

@arthanson commented on GitHub (Aug 22, 2024): @abrahamvegh can you please take a look at PR #17246 and try the fix to see if it addresses the performance issue for you?

adam commented

@abrahamvegh commented on GitHub (Aug 23, 2024):

Confirmed with production patch and testing, #17246 fixes the performance issue!

I will note HTML entity caret is not visually pleasing, but that sounds like a separate issue. 😅

@abrahamvegh commented on GitHub (Aug 23, 2024): Confirmed with production patch and testing, #17246 fixes the performance issue! I will note HTML entity caret is not visually pleasing, but that sounds like a separate issue. 😅

adam commented

@jeremystretch commented on GitHub (Aug 23, 2024):

I will note HTML entity caret is not visually pleasing, but that sounds like a separate issue.

@abrahamvegh could you post a screenshot of what it looks like for you? Feels like this may be an OS/browser-dependent thing we'll need to avoid. 😕

@jeremystretch commented on GitHub (Aug 23, 2024): > I will note HTML entity caret is not visually pleasing, but that sounds like a separate issue. @abrahamvegh could you post a screenshot of what it looks like for you? Feels like this may be an OS/browser-dependent thing we'll need to avoid. :confused:

adam commented

@abrahamvegh commented on GitHub (Aug 23, 2024):

@abrahamvegh could you post a screenshot of what it looks like for you? Feels like this may be an OS/browser-dependent thing we'll need to avoid. 😕

@abrahamvegh commented on GitHub (Aug 23, 2024): > @abrahamvegh could you post a screenshot of what it looks like for you? Feels like this may be an OS/browser-dependent thing we'll need to avoid. 😕 <img width="107" alt="Screenshot 2024-08-23 at 11 54 33 AM" src="https://github.com/user-attachments/assets/841b179f-9d1e-4066-8883-817721bddc96"> <img width="285" alt="Screenshot 2024-08-23 at 11 54 20 AM" src="https://github.com/user-attachments/assets/202880d5-bf49-42ed-bcf6-986ded3ededd">

adam commented

@DanSheps commented on GitHub (Aug 25, 2024):

IMO, and this is just my opinion, while we can easily work around this with Arthur's fix, this really should be something that is tackled on the Safari end (it is not a NetBox bug in my view).

@DanSheps commented on GitHub (Aug 25, 2024): IMO, and this is just my opinion, while we can easily work around this with Arthur's fix, this really should be something that is tackled on the Safari end (it is not a NetBox bug in my view).

adam commented

@coelho commented on GitHub (Aug 25, 2024):

@DanSheps While I agree this is a bug in Safari, it is a question of incentives.

Does Apple have an incentive to quickly resolve a bug where Netbox is one of the only apps affected? Besides a matter of correctness, not really.
Does Netbox have an incentive to allow Apple users (who may be paying 5 figures in major enterprises) to have a seamless experience? I do believe so.

It would be disappointing for potential customers of Netbox Labs to see the blame shifting that has occurred in this ticket.

@coelho commented on GitHub (Aug 25, 2024): @DanSheps While I agree this is a bug in Safari, it is a question of incentives. - Does Apple have an incentive to quickly resolve a bug where Netbox is one of the only apps affected? Besides a matter of correctness, not really. - Does Netbox have an incentive to allow Apple users (who may be paying 5 figures in major enterprises) to have a seamless experience? I do believe so. It would be disappointing for potential customers of Netbox Labs to see the blame shifting that has occurred in this ticket.

adam commented

@abrahamvegh commented on GitHub (Aug 25, 2024):

IMO, and this is just my opinion, while we can easily work around this with Arthur's fix, this really should be something that is tackled on the Safari end (it is not a NetBox bug in my view).

@DanSheps while I would wholly agree with @coelho here, there is also the matter that this problem did not exist prior to 4.x, which in my opinion makes it a NetBox regression before it makes it anything else.

I will also add that having manually applied this patch to my production instance has considerably increased my quality of life. 😃

@abrahamvegh commented on GitHub (Aug 25, 2024): > IMO, and this is just my opinion, while we can easily work around this with Arthur's fix, this really should be something that is tackled on the Safari end (it is not a NetBox bug in my view). @DanSheps while I would wholly agree with @coelho here, there is also the matter that this problem did not exist prior to 4.x, which in my opinion makes it a NetBox regression before it makes it anything else. I will also add that having manually applied this patch to my production instance has considerably increased my quality of life. 😃

adam commented

@DanSheps commented on GitHub (Aug 26, 2024):

Does Apple have an incentive to quickly resolve a bug where Netbox is one of the only apps affected? Besides a matter of correctness, not really.

Honestly, it is not the job of NetBox to make sure Apple implements a basic aspect of transform correctly. To be clear, I am not advocating to not-merge Arthur's PR, but someone (not me, I don't use Aapple) should at least raise the issue upstream in addition to resolving the issue.

Does Netbox have an incentive to allow Apple users (who may be paying 5 figures in major enterprises) to have a seamless experience? I do believe so.

To be clear, I am not employed by NetBox Labs. Their financial solvency, while important as their team are maintainers of this product as well, is not 100% my concern and it should not be the driving factor of the Open Source portions of NetBox. The members of this community are not all NetBox Lab customers and as such that cannot be the primary concern for the resolution of issues.

This product is Open Source, while NetBox Labs is a driving force behind the product now, just like Digital Ocean and NTC were driving forces behind the product previously, this is first an open source product. What are we to do if something pops up with Apple next time that isn't as easy to work around with simply switching to a Material UI carat?

This "pressure" argument can also be used against Apple. Those same organizations, likely have a major investment in Apple and could leverage that to have the problem fixed.

It would be disappointing for potential customers of Netbox Labs to see the blame shifting that has occurred in this ticket.

I am going to reiterate what I said above, but also, this isn't "Blame Shifting". The bug is squarely in Apple's field (or Tabler) as we are so far "downstream" of this bug that it really isn't "our problem".

@DanSheps while I would wholly agree with @coelho here, there is also the matter that this problem did not exist prior to 4.x, which in my opinion makes it a NetBox regression before it makes it anything else.

Safari not properly supporting a CSS function is not a "NetBox regression", it is simply a Safari bug.

That said, this really isn't the place to have a discussion regarding this any further.

@DanSheps commented on GitHub (Aug 26, 2024): > * Does Apple have an incentive to quickly resolve a bug where Netbox is one of the only apps affected? Besides a matter of correctness, not really. Honestly, it is not the job of NetBox to make sure Apple implements a basic aspect of transform correctly. To be clear, I am not advocating to not-merge Arthur's PR, but someone (not me, I don't use Aapple) should at least raise the issue upstream in addition to resolving the issue. > * Does Netbox have an incentive to allow Apple users (who may be paying 5 figures in major enterprises) to have a seamless experience? I do believe so. To be clear, I am not employed by NetBox Labs. Their financial solvency, while important as their team are maintainers of this product as well, is not 100% my concern and it should not be the driving factor of the Open Source portions of NetBox. The members of this community are not all NetBox Lab customers and as such that cannot be the primary concern for the resolution of issues. This product is Open Source, while NetBox Labs is a driving force behind the product now, just like Digital Ocean and NTC were driving forces behind the product previously, this is first an open source product. What are we to do if something pops up with Apple next time that isn't as easy to work around with simply switching to a Material UI carat? This "pressure" argument can also be used against Apple. Those same organizations, likely have a major investment in Apple and could leverage that to have the problem fixed. > It would be disappointing for potential customers of Netbox Labs to see the blame shifting that has occurred in this ticket. I am going to reiterate what I said above, but also, this isn't "Blame Shifting". The bug is squarely in Apple's field (or Tabler) as we are so far "downstream" of this bug that it really isn't "our problem". > @DanSheps while I would wholly agree with @coelho here, there is also the matter that this problem did not exist prior to 4.x, which in my opinion makes it a NetBox regression before it makes it anything else. Safari not properly supporting a CSS function is not a "NetBox regression", it is simply a Safari bug. That said, this really isn't the place to have a discussion regarding this any further.

adam commented

@coelho commented on GitHub (Aug 26, 2024):

Honestly, it is not the job of NetBox to make sure Apple implements a basic aspect of transform correctly. To be clear, I am not advocating to not-merge Arthur's PR, but someone (not me, I don't use Aapple) should at least raise the issue upstream in addition to resolving the issue.

This argument is not convincing to me. You are basically saying "because it does not affect me, I am not concerned with other's user experience."

To be clear, I am not employed by NetBox Labs. Their financial solvency, while important as their team are maintainers of this product as well, is not 100% my concern and it should not be the driving factor of the Open Source portions of NetBox. The members of this community are not all NetBox Lab customers and as such that cannot be the primary concern for the resolution of issues.

I was not implying that you were employed by Netbox Labs. I am saying that the incentives of an organization are aligned with improving customer/user experience, which is a good thing. However, this ticket hasn't been focused on UX, which is disappointing.

This product is Open Source, while NetBox Labs is a driving force behind the product now, just like Digital Ocean and NTC were driving forces behind the product previously, this is first an open source product. What are we to do if something pops up with Apple next time that isn't as easy to work around with simply switching to a Material UI carat?

This "pressure" argument can also be used against Apple. Those same organizations, likely have a major investment in Apple and could leverage that to have the problem fixed.

If Netbox is incompatible with a major browser engine with 10%~ desktop market share and a majority 30% mobile market share, then... it gets fixed? I don't know if you remember the days of IE, or that we still have frameworks for compatibility with Firefox, but browser compatibility is still a goal for most software.

Who cares who's bug it is? Netbox can fix it, so let's fix it.

@coelho commented on GitHub (Aug 26, 2024): > Honestly, it is not the job of NetBox to make sure Apple implements a basic aspect of transform correctly. To be clear, I am not advocating to not-merge Arthur's PR, but someone (not me, I don't use Aapple) should at least raise the issue upstream in addition to resolving the issue. This argument is not convincing to me. You are basically saying "because it does not affect me, I am not concerned with other's user experience." > To be clear, I am not employed by NetBox Labs. Their financial solvency, while important as their team are maintainers of this product as well, is not 100% my concern and it should not be the driving factor of the Open Source portions of NetBox. The members of this community are not all NetBox Lab customers and as such that cannot be the primary concern for the resolution of issues. I was not implying that you were employed by Netbox Labs. I am saying that the incentives of an organization are aligned with improving customer/user experience, which is a _good thing_. However, this ticket hasn't been focused on UX, which is disappointing. > This product is Open Source, while NetBox Labs is a driving force behind the product now, just like Digital Ocean and NTC were driving forces behind the product previously, this is first an open source product. What are we to do if something pops up with Apple next time that isn't as easy to work around with simply switching to a Material UI carat? > > This "pressure" argument can also be used against Apple. Those same organizations, likely have a major investment in Apple and could leverage that to have the problem fixed. If Netbox is incompatible with a major browser engine with 10%~ desktop market share and a majority 30% mobile market share, then... it gets fixed? I don't know if you remember the days of IE, or that we still have frameworks for compatibility with Firefox, but browser compatibility is still a goal for most software. Who cares who's bug it is? Netbox can fix it, so let's fix it.

adam commented

@DanSheps commented on GitHub (Aug 26, 2024):

This argument is not convincing to me. You are basically saying "because it does not affect me, I am not concerned with other's user experience."

I am not saying we shouldn't be concerned with it but I am saying someone, who is not me because I don't use Safari or Apple products and cannot accurately describe the bug, should open a bug report with Safari to get it fixed there. My whole point is that ultimately this is a Safari bug and should be fixed on their end. That doesn't preclude us from merging our fix, but we shouldn't just not do something about the Safari piece as well, it is just that I cannot because I haven't observed the bug first hand.

@DanSheps commented on GitHub (Aug 26, 2024): > This argument is not convincing to me. You are basically saying "because it does not affect me, I am not concerned with other's user experience." I am not saying we shouldn't be concerned with it but I am saying someone, who is not me because I don't use Safari or Apple products and cannot accurately describe the bug, should open a bug report with Safari to get it fixed there. My whole point is that ultimately this is a Safari bug and should be fixed on their end. That doesn't preclude us from merging our fix, but we shouldn't just not do something about the Safari piece as well, it is just that I cannot because I haven't observed the bug first hand.

adam commented