Help diagnosing site flashing/ glitching when navigating through internal links | Astro Lounge | Page 1

umbral sail Nov 25, 2023, 5:56 PM

#

Hey guys!

I am building my blog with the tailwind-astro-starting-blog theme by wanoo21.

Repo: https://github.com/wanoo21/tailwind-astro-starting-blog

On my fork the site is flashing/ glitching out when clicking any link in Safari. In Chrome the mobile nav seems to fly by to the right.

Really not sure what could be causing this, I haven’t made many changes.

I’m hosting on Netlify, and he’s using Vercel.

Here’s my repo: https://github.com/jpasholk/jpshlk-blog

Live site: https://jpshlk.com

I am going to reach out to him, but I thought I’d ask here first since it seems to be an issue with my site and not his demo.

Any help would be appreciated!

Thanks!

GitHub

GitHub - wanoo21/tailwind-astro-starting-blog: A started template w...

A started template with Tailwind and Astro. Contribute to wanoo21/tailwind-astro-starting-blog development by creating an account on GitHub.

Astro Starter Blog

A blog created with Astro and Tailwind.css

GitHub

GitHub - jpasholk/jpshlk-blog: My new blog forked from tailwind-ast...

My new blog forked from tailwind-astro-starter-blog by wanoo21 - GitHub - jpasholk/jpshlk-blog: My new blog forked from tailwind-astro-starter-blog by wanoo21

Hi, I'm Josh!

My new blog created with Astro and Tailwind.css

severe stump Nov 25, 2023, 8:31 PM

#

Looks like it's because <ViewTransitions /> is not within <head> in your root layout

umbral sail Nov 25, 2023, 8:44 PM

#

Hey @severe stump thanks for replying!

That’s odd because it doesn’t look like it’s in the other repo as well. 🤔

https://github.com/wanoo21/tailwind-astro-starting-blog/blob/main/src/components/BaseHead.astro

GitHub

tailwind-astro-starting-blog/src/components/BaseHead.astro at main ...

A started template with Tailwind and Astro. Contribute to wanoo21/tailwind-astro-starting-blog development by creating an account on GitHub.

#

But when I’m not on mobile in a little bit I’ll try it. I had thought about that, but I’m still a noob with this stuff so I didn’t want to mess with that. lol

umbral sail Nov 25, 2023, 9:20 PM

#

Damn, I actually have no idea where the <head> is coming from. I searched the repo and didn’t see it anywhere.

It does appear in the html though. Is it provided by Astro somehow?

#

Looks like he includes <ViewTransitions /> right below the <html> tag. Is that right?

severe stump Nov 25, 2023, 9:37 PM

#

You can add a <head></head> and put the <ViewTransitions /> inside. I'm not seeing an existing head in that project

umbral sail Nov 25, 2023, 9:55 PM

#

severe stump You can add a `<head></head>` and put the `<ViewTransitions />` inside. I'm not ...

Yeah for sure. But there’s one in the generated html, so wouldn’t I have duplicate heads

severe stump Nov 25, 2023, 9:59 PM

#

umbral sail Yeah for sure. But there’s one in the generated html, so wouldn’t I have duplica...

I'm not seeing a head in your production site. Also you can check out ViewTransitions docs for usage https://docs.astro.build/en/guides/view-transitions/#adding-view-transitions-to-a-page

umbral sail Nov 25, 2023, 10:02 PM

#

severe stump I'm not seeing a head in your production site. Also you can check out ViewTransi...

Yeah I was just re-reading that page a minute ago. But I’m seeing a head in my html… Hrm, still on mobile but I’ll jump on my Mac in about 20-30 mins to see if I can figure this out. Thanks again for helping!

umbral sail Nov 25, 2023, 11:08 PM

#

severe stump I'm not seeing a head in your production site. Also you can check out ViewTransi...

Okay, this is really wierd... I can see the <head> in my live site, but not in the files produced by npm run build locally or when built with Netlify...

#

umbral sail Nov 25, 2023, 11:26 PM

#

Okay, I've narrowed it down to pages with images that I've uploaded in the mdx files using ![]()

umbral sail Nov 26, 2023, 1:21 AM

#

I wrote some more about it here: https://jpshlk.com/blog/odd-behavior-with-transitions/

Odd Behavior With Transitions After Forking The Theme

After forking the theme and adding my own content, there's super glitchy transitions when the site is live.

#

I'll add anything else I find, and the solution once we can figure it out. Thanks!

umbral sail Nov 26, 2023, 11:59 PM

#

Anyone have any idea?

severe stump Nov 27, 2023, 2:05 AM

#

Your site worked fine for me after adding the missing <head></head> around the <ViewTransitions />. You can test it locally - npm run build and then npm run preview

umbral sail Nov 27, 2023, 4:48 PM

#

severe stump Your site worked fine for me after adding the missing `<head></head>` around the...

Thanks man!

I ended up fixing it by wrapping the <head> tag around the BaseHead component as well. If I only included it around <ViewTransitions /> the layout became smaller/ zoomed out on mobile.

Like this:

<head>
<ViewTransitions />
<BaseHead title={title} description={description}/>
<head/>

#Help diagnosing site flashing/ glitching when navigating through internal links