skeletonlabs
Empty style tag added to head on menu open/close
When opening or closing a menu, an empty style tag is added to the head.
STR:
- Open Dev Tools and select Elements (or click on page-> Inspect)
- Go to the Menu docs and open/close a menu
- Inspect the head in dev tools
Please hold off on this one until https://github.com/Brain-Bones/skeleton/issues/41 is completed and merged.
I have seen this same behavior for things like the lightswitch and accordion, but Not sure how many components overlap under the hood
Good to know it's happening with the accordion too. VERY strange bug, but two things of note:
- The next update contains a total rebuild of the accordion component. It now utilizes detail/summary tags. So it may no longer cause the issue since it's less JS heavy.
- I'm not saying the LightSwitch is without issue. Frankly the code is bad (I know, I wrote it heh). But it may be worth checking if the issue persists in the new SvelteKit versions. Could have been a Svelte/SvelteKit bug. But either way a refactor and improvement to that component is overdue.
FYI I'll be implementing a PR for updating to the next.405+ version of SvelteKit today, so I'll try remember to check this as I test!
FYI I've confirmed the following:
- I can replicate the head/style element updates for the live/production version of Skeleton (v0.30.7)
- I cannot reproduce the issues in the most current dev branch, which means the accordion issues are resolved.
Given this, I'll turn my attention to the Menu and LightSwitch components.
I was under the impression the LightSwitch was at fault here, so I've opted to refactor and redesign this a bit. It now looks and operates a lot like the versions on these sites:
- https://vitejs.dev/
- https://vitest.dev/
Unfortunately this has not solved the problem with the HTML head style blocks being duplicated, however this now only occurs when interacting with Menu components. I'll turn my attention to to the Menu components tomorrow.
Keeping this open to address the Menu updates mentioned in the comment above.
Finally came across this and identified it's the transition directive that's causing this to occur. We use transition on several components, including Menus, Alerts, etc.
https://github.com/sveltejs/svelte/issues/4801
Gonna mark this CLOSED as I don't believe it's an issue we can fix on our end. I'd suggest we report it to Svelte if we can identify any negative impact from this.