Rack elevation images override page styling when loading in

[aq5747]

Deployment Type

Self-hosted

NetBox Version

v4.3.5

Python Version

3.10

Steps to Reproduce

1. Go to a device page which is assigned to a rack and position (thus will show a rack elevation image)
2. Make sure the window is small enough so that the rack elevation image hasn't loaded yet
3. Scroll down the page slowly until the rack image lazy loads in
4. Notice how the entire page "shifts" and some elements change styles as soon as the rack elevation image loads (Very noticeable on table headers).

Expected Behavior

Loading of rack images should not override the styling of the page.

Observed Behavior

Some of the styling from the rack elevation SVG image is also being applied to the page itself after the image lazy loads in. When the rack image loads you can see the entire device page "shift" as some styling is updated. This is very noticeable with table headers on the page, such as the one on the Images card right above the rack. This happens on any page where a rack elevation image loads but is most noticeable on the device page.

This seems like it's related to the lazy loading of the rack image (#19550), as this doesn't happen in v4.3.3 or earlier.

[jeremystretch]

I believe this is due to embedding the SVG code (and its style) directly within the page, rather than using an <object> element to load the data as we did prior to #19550. The SVG styling is no longer contained and now overflows onto the rest of the page.

It doesn't seem that we actually need HTMX here. We should be able to use <img src="..." loading="lazy"> to achieve the desired behavior while keeping the SVG styling contained.

[jeremystretch]

Unfortunately, using an <img> tag apparently won't support our labels/images toggle for the rack elevation.

The only solution I can see to support lazy loading would be to introduce a separate HTMX-enabled endpoint which returns the <object> element, which then in turn loads the SVG data from the REST API, which would be rather inefficient.

[jeremystretch]

Turns out we can just tweak the CSS itself to apply only to the SVG element. (I was under the impression the offending code was as a result of the imports, but no.)