Script with innerHTML not working on Safari #4859
Comments
|
Does it work in other browsers well? Would it be possible to share a deployed URL? |
|
On desktop yes, I've tested it on all the browsers. I reverted the code from using the edit: I don't own a Mac so can't test it on Safari there, only iPhone. |
|
@aleksastojsic Hey I just tried it and on desktop it fails to load on Safari |
|
Looks more like a issue specific to Safari |
|
the error |
|
So what's happening is that define:vars produces the variable with |
|
Okay attempting a fix |
|
Great find. Not sure if related but TypeScript did throw me this:
|
|
@rishi-raj-jain Hey I upgraded to |
|
@aleksastojsic So I get why this issue issue still exists. Now this is occuring because of the extra { } sent while using define:vars. Doing a quick PR for it. |
|
Though addition of those extra {} results in the error only in safari, and not on other browsers. Simple reproduction: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
{
const days = ["1"];
function getDay() {
return days[0];
}
console.log(getDay());
}
</script>
</body>
</html>Would throw console error in safari while work in chrome |
|
@rishi-raj-jain Should I open another issue? I feel like this is important to fix. |
What version of
astroare you using?latest
Are you using an SSR adapter? If so, which one?
None
What package manager are you using?
yarn
What operating system are you using?
Windows, but the issue is on iOS mobile
Describe the Bug
Trying to get a simple message displayed in the footer saying "Have a great {currentDay}" in my Footer astro component.
In doing so, I first tried writing the function for getting the current day in the Component Script part (---) and that didn't work, it would only get the day when the site was built and deployed, which is as I understand the expected outcome.
Then I realized I should probably run that script on the client side because I need the current day to be updated daily, so I used the
<script>tag with the same function and injected the text with.innerHtml. That got the desired outcome and the days were updating as expected, everything was working on Desktop browsers. But when I opened the site on my iPhone, both Safari and Chrome (everything is Safari on iPhone) the message wasn't there.edit: I've tried
.innerTextinstead of.innerHtml, still not working on Safari.The reproduction of the problem below now uses
set:htmlbut my guess is it won't update the current day tomorrow, as with using the Component Script part. I left the client-side script that was not working on Safari commented out.Link to Minimal Reproducible Example
https://github.com/aleksastojsic/astro-portfolio/blob/main/src/components/Footer.astro
Participation
The text was updated successfully, but these errors were encountered: