Charts fail to render on iOS 16

[vinnymac]

Trends chart is completely empty on this device, maybe a polyfill missing 🤔. Worth investigating more to learn what causes this.

Not sure which devices this impacts yet, but I was able to reproduce this on an iPhone X latest 16.x

[whitep4nth3r]

cc @graphieros

[graphieros]

@vinnymac

Are you seeing the charts on the compare page ?

Installing Xcode to see if I can replicate (I don't have an iPhone).
Would you mind telling me if you see the chart on this page ?

Edit: charts are visible on Xcode simulator for the latest iPhones
✅ 16e
✅ 17 Pro
✅ 17 Pro Max

Did not test for iPhone X (kind of old no ?)

If you do, can you also check if the downloads chart on this version of npmx is rendered ? (#1338)

The fact that we don't see the inputs seem to point to a failure of the component, not necessarily the chart.

[alexdln]

@graphieros I'm almost sure the problem related to this part - https://github.com/npmx-dev/npmx.dev/blob/main/app/components/Package/WeeklyDownloadStats.vue#L314

[graphieros]

@alexdln that would actually be good news
Would you have an idea how to fix it ?

[alexdln]

https://github.com/npmx-dev/npmx.dev/blob/main/app/components/Modal.client.vue#L28-L31
Do we need these conditions? Perhaps in some version of Safari, for example, target doesn't switch, and transitionend is never executed because of this

[graphieros]

I added it to fix flaky behavior we had before when the component was moved inside a dialog element. 50% of the time on desktop, the chart was rendered before the dialog transition was finished, resulting in bad rendering of the minimap (in the DOM, reactive to interactions, but invisible), and 100% of the time on mobile. I don't know if there is another way, that does not involve timeouts or janky solutions.

[graphieros]

I think safari on i0S16 might have incomplete support for the dialog element
Maybe we could listen to the first child of the dialog (like stable size) instead ?

[alexdln]

Got it - we need transitionend. But do we need these conditions inside?

[graphieros]

Maybe not ? I put belt & suspenders on this one

[alexdln]

It works locally without this, so I think we can remove it, since transitionend should be executed only once for dialog, and essentially, if one of these conditions is false at that moment, transitionend will never execute. Let's push and we'll test it on staging 🤔

[alexdln]

@vinnymac I think this one should work. Could you please check how it works on this link - https://npmxdev-git-fork-alexdln-fix-modal-transition-end-check-npmx.vercel.app/package/nuxt?

UPD: It seems like there's no dialog transition happening in Safari on the iPhone 15...

[alexdln]

@vinnymac I passed browserstack limits and didn't have enough time to debug it properly (attempted solution seems not working [at least not for all cases]) :(

I hope someone can take a look with a fully functional device (I'd be happy to join to debug or give a link and ask for the results).
It is some really weird bug. I was able to replicate it using the iPhone 15 & 15 Pro emulator

This is definitely related to the parts above, but unfortunately I can't say what exactly