#JS/TS scripts running differently on Astro vs using vanilla html/CSS

3 messages · Page 1 of 1 (latest)

sudden coyote
#

I have a Hero component which has a small text spinner using vanilla js.
Now when I render this spinner on either codepen or a raw html/css with script tag for js in vscode, The spinner works perfectly fine.

However in Astro, idk what I am doing wrong, but it is not spinning the way it should. There is something wrong with JS in Astro vs normal in my case.
this is the codepen for the spinner: https://codepen.io/paulomfj/pen/zYKgPGG

I have attached what the spinner should work like vs what I see in my astro project...
I have double/triple checked JS script is loading in, I have tried it in TS configured project, JS configured project but it just does not work in my astro project.\

I have tried it on codepen, raw html css js, and even on django templates. It works fine there. But in astro it just does not work. I have also noticed some other codepen are also not working in astro like they should such as no hover effect etc on some buttons. idk whats wrong with js/ts working in wierd ways.
js

#

can someone replicate this on their system to check if it works? thanks.

sudden coyote
#

I narrowed down the error to <span> tags styling not being applied to the spans created by the script. why is this?