svg:not(:root) specificity (normalize.sass needs to be updated)

[AlexDaniel]

What happened?

When combining Quasar with BabylonJS, normalize.sass styles are breaking the Node Material Editor in BabylonJS.

What did you expect to happen?

Quasar's css corrections should be neutral for most other libraries.

Reproduction URL

.

How to reproduce?

1. Start a Quasar project
2. Add BabylonJS to it
3. Start the frontend and open the node material editor
4. Drag the nodes around
5. You'll see that the node connections are clipped

Actually, easier said than done… It's pretty straightforward but takes some time. Given that the fix is already in normalize.css, please let me know if I should actually provide something for reproducing this.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Style & Identity (quasar)

Platforms/Browsers

Firefox, Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

Please see this ticket:

• Node material editor is not rendering the connections properly BabylonJS/Babylon.js#14100

What happens is that BabylonJS is using an <svg> element that is arbitrarily sized, and then it expects the rendered elements to overflow.

However, quasar sets this style:

svg:not(:root)
  overflow: hidden

Which seems to change the default expectation. Therefore, content gets clipped.

This issue has been raised in normalize.css:

• svg:not(:root) specificity is very high necolas/normalize.css#718

And it was resolved by this commit:

• necolas/normalize.css@004d58b#diff-289feb25fbea45a1454d7fe3d646acecfe2a3ee873c72a28b17dd00f1d06f7d6L222

However, that change was not ported to Quasar yet. I think it should be.

[github-actions]

Hi @AlexDaniel! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[rstoenescu]

Hi,

Thanks for bringing this up. Will be fixed in the next release.