PDF attachment not rendering right when ViewTransition is enabled.

[chenxsan]

What version of astro are you using?

2.10.1

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

pnpm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

Say I have a pdf file containing Chinese texts under public folder, and I have a link to that pdf file in one of my pages:

<a href="/chinese.pdf">A PDF containing Chinese.</a>

With ViewTransition enabled, clicking that link would return something like this:

What's the expected result?

I would expect the browser to show the pdf content.

Link to Minimal Reproducible Example

https://github.com/chenxsan/astro-view-transition-pdf

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

Could you add the download attribute here? We could support that as a way to signal the router not to treat it as page navigation.

We might also want a data-astro-no-follow (bikeshed) or something so you can prevent router navigation. cc @natemoo-re for ideas.

[chenxsan]

Could you add the download attribute here? We could support that as a way to signal the router not to treat it as page navigation.

We might also want a data-astro-no-follow (bikeshed) or something so you can prevent router navigation. cc @natemoo-re for ideas.

but I don't want to download it, I just want to view the file in browser. Fyi, it's not just pdf file, all images would show the similar result:

[natemoo-re]

We might also want a data-astro-no-follow (bikeshed) or something so you can prevent router navigation. cc @natemoo-re for ideas.

data-astro-reload or rel="nofollow" would work. SvelteKit supports the former.

[chenxsan]

We might also want a data-astro-no-follow (bikeshed) or something so you can prevent router navigation. cc @natemoo-re for ideas.

data-astro-reload or rel="nofollow" would work. SvelteKit supports the former.

Users don't have to add the attribute manually right? The compiler would handle them automatically?

[matthewp]

Yeah users would need to add it. By default we have to assume that same-site navigation is to another page and not to a file.

[martrapp]

I will go with data-astro-reload, which is close to the names of this feature in other client-side routers like react router or the sveltekit router.

[matthewp]

@martrapp can you link to docs on those other routers?

[martrapp]

https://kit.svelte.dev/docs/link-options#data-sveltekit-reload
https://reactrouter.com/en/main/components/link#reloaddocument

[martrapp]

Do we need a mapping in the compiler for this? (e.g. transition:reload)?

[martrapp]

@chenxsan I changed the link in your example to

	<a href="/chinese.pdf" data-astro-reload>A PDF containing Chinese.</a>

with the new Astro version (not yet released) the PDF is shows in the browser when the user clicks the link.

[matthewp]

Fixed by #8217. Will do a new RC tomorrow with these changes.