Renderer failed on rich content markup

[reksaandhika]

Hi @jakewhiteley First thing, I really love the new update, I immediately update it, and of course my website transitions now faster! But there's a (maybe) critical issue triggered, let me explain the about the bug.

Describe the bug So I have an on-progress website, and I am trying to update the taxi.js to 1.1.0 to get a faster fetch transition benefit. I tried the transition forward, and back, and I found taxi.js failed to render when there's a page with a lot of HTML (content). Because I can't publish my WIP website, so I create the debug project, so you know why this happens.

You can try cloning my repo here: taxi-debug

To Reproduce Steps to reproduce the behavior:

1. Make HTML with lot of content (heading, description, input, images, etc)
2. Try navigating to that page (make sure you navigate from less content page -> rich content page)
3. If the bug is not triggered, repeat the number 2 step but on refresh position (because this bug only happens sometimes, but often enough)

Note: If you try my repo, you can try navigation from home -> about and keep repeating if the bug is not triggered. Make sure you refresh on home position if the bug is not triggered and repeat the navigation.

Info If applicable, add screenshots to help explain your problem.

https://user-images.githubusercontent.com/39384007/192044023-da5330d2-0def-4b45-a366-576162611252.mp4

Device

• Device: PC Windows
• OS: Windows
• Browser: Google Chrome
• Version: 105

Once again, thanks for keep improving the library, keep up the great work!

[jakewhiteley]

Hi @reksaandhika , sorry for the delay.

I will check this out today, but it looks like a markup issue on your side and not a Taxi issue, but I will let you know.

[reksaandhika]

Hi @jakewhiteley, no problem, I understand you must be busy and can't always have time to develop the library.

I'm not sure if this is my markup issue because this happens only when I update to 1.1.0 version, and error on console coming from Renderer.js from taxi, thank you for your time.

[jakewhiteley]

@reksaandhika I have clicked back and forth around 80 times now in your app, and never get the error :/

Could you try in incognito and see if it still happens?

[reksaandhika]

@jakewhiteley Maybe your internet too fast, you can try throttle your network on inspect element. Also please checklist "disable cache".

Or you can try my step:

1. Refresh page on homepage
2. After refresh, immediately go to "About" page

Note: don't let cursor hover too long on next page

https://user-images.githubusercontent.com/39384007/193636921-e1173442-ef55-4275-84b9-e504fac8f3a3.mp4

[reksaandhika]

Maybe HTML on server will help to found this bug.

I just deploy the project: https://taxi-debug.vercel.app/

Edit: I think finding bug on live link not good idea because vercel compress the HTML file, so better check on local.

[reksaandhika]

@jakewhiteley Here is with incognito (private mode) on Firefox. No extension running, and this happens also on Macbook and iPhone (I make sure it's not from my computer).

https://user-images.githubusercontent.com/39384007/193643907-4d2b98f9-5d85-4175-b060-3fedcceabc4e.mp4

[jakewhiteley]

I still can't recreate it at all :/

I do notice your reloadJsFilter is a bit unusual and you should probably remove that config line, but this isn't the cause of your issue.

When it happens for you, what is underneath your loader? Is there any page content?

[reksaandhika]

Ahh that's too bad.

I just like my reloadJsFilter preference like that, only load once for specific js only, even I remove that, the failed render still happen.

I don't get it when usually this happen, but mostly when "next page" not ready on hover and conflicted fetch onclick.

This is list error source from console log:

[reksaandhika]

I think I found the problem, my await delay() on Transition onLeave seems like the problem. When I remove it, I never get the failed render. Is my code wrong to do delay like that for waiting transition? @jakewhiteley

But keep in mind, I never get problem with same code with previous taxi version.

[jakewhiteley]

Not really anything wrong no.

I would suggest something like

gsap.fromTo('.preload', {yPercent: 100}, {yPercent: 0,  display: 'flex'})
   .then(() => {
      done()
   })

or the tween's onComplete callback.

The thing is, I don't see a reason why it would be happening. Even when I throttled to basically no internet, I never encountered any race conditions - when the initial document is being fetched, the transition waits for this to finish before calling it's enter method.

On bigger or more complicated apps though, I would move your reveal animation into a transition and out of a renderer or you are creating a hard dependency between a renderer and a transition.

Another tip is I will enqueue things to load (images etc) on my renderer onEnter, and my transition onEnter will wait until all of these are resolved before resolving itself.

[jakewhiteley]

Let me know if you find the actual race condition or cause of this issue, and feel free to reopen this ticket or create a new one.

I am closing this for now.

[reksaandhika]

I can show you my WIP project, it's more easily to trigger the bug, can I contact you? maybe twitter DM, but your DMs closed @jakewhiteley