search

elad2412 / the-new-css-reset

The New Simple and Lighter CSS Reset
https://elad2412.github.io/the-new-css-reset/
MIT License
2.26k stars 229 forks source link

svg use elements are not show in firefox #88

Open nidi3 opened 6 months ago

nidi3 commented 6 months ago

https://jsfiddle.net/7hsnzrpa/1/

In Chrome, the circle is visible, in Firefox not. (MacOS)

graymatter00 commented 6 months ago

Tested the jsfiddle sample on Windows and Android: Works fine in Chrome and Edge. Produced the same issue with Firefox.

Removing the reference to css-reset fixes the issue. I dug around but can't find the cause.

fabulousgk commented 6 months ago

I was able to figure out a bit, but not a solution. I determined that the issue is that the cx and cy attributes are getting overwritten, similar to how image dimensions would get overwritten if the img tag was not excluded. I believe that this is occurring because the circle is being rendered in shadow dom and the ’svg *’ selector is not being recognized there.

If you put circle in the exclusion list, eveyrhing works, but listing all the possible svg elements in there would make it very long and not a great solution IMO. However, I have found no other way to target this wierd shaddow dom rendering.

On May 15, 2024, at 12:23 AM, Tony Gray @.***> wrote:

Tested the jsfiddle sample on Windows and Android: Works fine in Chrome and Edge. Produced the same issue with Firefox.

Removing the reference to css-reset fixes the issue. I dug around but can't find the cause.

— Reply to this email directly, view it on GitHub https://github.com/elad2412/the-new-css-reset/issues/88#issuecomment-2111609585, or unsubscribe https://github.com/notifications/unsubscribe-auth/A6IUNUKHFBAFMLH45ZVRRU3ZCLWL7AVCNFSM6AAAAABHWOZFXKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMJRGYYDSNJYGU. You are receiving this because you are subscribed to this thread.

graymatter00 commented 6 months ago

Not a solution, but a workaround using symbol instead of defs...

<link rel="stylesheet" href="https://unpkg.com/the-new-css-reset@1.11.2/css/reset.css" />
<svg hidden>
  <symbol id="my-symbol">
    <circle cx="10" cy="10" r="5" />
  </symbol>
</svg>

<svg>
  <use href="#my-symbol" />
</svg>

This seems to work fine in Firefox on Windows.