Interesting bug. I can reproduce on Chrome and Safari, but not on Firefox. I think the root cause must be some obscure mechanism where some SVG elements like thislinearGradient inherit some CSS properties, like in this casedisplay: none.

I can't think of a better fix, but please move this CSS intoweb_src/css/base.css:

.hide-absolute {position: absolute;left:-9999px;}

Maybe a similar case:

https://github.com/go-gitea/gitea/blob/main/templates/base/disable_form_autofill.tmpl

You mean the styling of.ui .form .autofill-dummy? It's not quite the same as this.

You mean the styling of.ui .form .autofill-dummy? It's not quite the same as this.

I didn't say "same". I mean "similar":

1. They are all caused by uncontrollable and unclear browser's behaviors
2. They all need "not really hidden" but "visually not existing" elements
3. They all have complex backgrounds and need comments to explain, otherwise the future readers won't understand

For this case, these styles work without magic number:

... {    position: absolute;    width: 0px;    height: 0px;    overflow: hidden;}

Generally speaking I would avoid SVG "icon maps" withxlink. There are too many obscure browser behaviours/bugs related toxlink and rendering the SVG directly is best to avoid those.

Oh and btw,xlink:href is deprecated:https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/xlink:href.

Generally speaking I would avoid SVG "icon maps" withxlink. There are too many obscure browser behaviours/bugs related toxlink and rendering the SVG directly is best to avoid those.

xlink was used to avoid duplicate SVG contents to reduce page size.

It should be easy to remove thexlink and render the icon directly. I am fine with either approach.

I don't think the size impact will really matter. On a big page, there may be 100 icons, which shouldn't be more than a few kBs.

Oh and btw,xlink:href is deprecated:https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/xlink:href.

href isn'thttps://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/href

I don't think the size impact will really matter. On a big page, there may be 100 icons, which shouldn't be more than a few kBs.

Not a few, but dozens of or hundreds of.

Details