"Transition was aborted because of invalid state" coming form hoisted.*.js

[bddicken]

Astro Info

$ npm run astro info

> astro-paper@4.6.0 astro
> astro info

Astro                    v4.6.3
Node                     v20.11.1
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind
                         @astrojs/react
                         @astrojs/sitemap

If this issue only occurs in one browser, which browser is a problem?

Brave and Chrome on MOBILE specifically

Describe the Bug

This bug has only surfaced on Brave and Chrome on my mobile Android device. Does not happen on Brave, Chrome, or Firefox on my mac computer, and also does not happen on firefox on mobile device.

I have a personal site that I've created with astro using the astropaper template. When I navigate from my home page (b enjdd.com) to my post (https://benjdd.com/posts/stylized-image-binning-algorithm/) I get the following in the console:

Note that if you land directly on the blog page it works fine. You have to land on the website on the home page (or some other page) and then navigate to that post for the error to happen. I did some digging and I believe the root cause is ultimately that I have two tags on the page of the form:

<input ... type="file" />

When these are removed, the error goes away. Thus, it seems like something specific with chrome / chromium on mobile that does not function properly with this feature.

This error causes the html canvases on the page to not properly display content.

What's the expected result?

I expect the error to not happen, and the canvases to display properly.

Link to Minimal Reproducible Example

not provided

Participation

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

[martrapp]

Hi @bddicken, thank you for opening this issue.

Unfortunately, I am not able to reproduce this with Chrome on Android. I went to https://benjdd.com/ and followed the link to the binning page, see screenshot below.

Could you please provide a minimal reproduction?

[github-actions]

Hello @bddicken. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

[bddicken]

@martrapp Thanks. Good to know that it works fine on your device. Seems like maybe there's something Android/Chrome-version-specific going on here. I also tested on chrome on an iPad, and works fine there.

I'm thinking it's going to be hard to make a minimal reproduction for this. Not sure what standard operating procedure is for Astro bug reports in these scenarios.

[martrapp]

Hi @bddicken. Without a reproduction there is not much that can be done to help. You might try to get some more information about the cause of the error. I am clueless what invalid state the browser dislikes in your case. Typically this is raised e.g. when view transition names are not unique. This is unlikely in your case, as the error only occurs in few constellations. The spec (https://drafts.csswg.org/css-view-transitions-1/) lists four possible reasons for InvalidStateErrors:

• If document’s visibility state is "hidden"
• If capturing the old state returned an error
• If capturing the new state returned an error
• If update pseudo element styles returned an error

Sorry. This is all very generic.

[CatoCannizzo]

@martrapp Here is another website you might try replicating the error on.
https://catocannizzo.github.io/casestudies/acesinfosystem/
I am using Chrome 124.0.6367.82 on a Android 13 motorola razr plus & I can also replicate it on Chrome 123.0.6312.120 on a Android 14 samsung S23 Ultra

On either casestudy page I have an event listener attached to astropageload that should make the header green, which works on desktop but not when swapped to a page on mobile. Again directly landing on the page the loads the header just fine. You can view the source code here: https://github.com/CatoCannizzo/catocannizzo.github.io/blob/main/src/components/Header.astro

[martrapp]

@CatoCannizzo Thank you very much! Will check that out, soon!

[martrapp]

with #10900 we also change some bits of error handling. I hope to get more insights from the error messages once that is released.