It doesn't work properly on chrome iphone.

[joelAppslabs]

Framework, vue 3.

version XYZ: v0.6.5

I have checked it with different devices:

• Android chrome: works

• Iphone safari: it works

• Iphone chrome: not working.

Mainly in the errors they are for the states "in-". the out if they work.

[mattaningram]

I'm seeing it working in Chrome on my iPhone, at least on the main site. Do you have a URL or video you can show me of where it doesn't work? Also what version of iOS are you using?

[joelAppslabs]

Sorry for delay..

I use a last iOS version, iPhone 13 pro.

This example only add a xyz library and tailwind, in dev mode.

working in chrome for iOS.

IMG_1321.MOV

[joelAppslabs]

And I also add a video from the official XYZ website that does exactly the same thing for the “fade-in” tags

IMG_1322.MOV

[mattaningram]

Strange, I just checked the site on Chrome in iOS (all iOS browsers including Chrome use the same webkit renderer behind the scenes due to Apple limitations) and it is working fine there. I see it fade in and out normally.

Is this happening for ALL animations or just basic fades?

Can you show an example of the code you are using for your sidebar?

[joelAppslabs]

My code for show nav:
XyzTransition(xyz="fade left")
.shape-nav(v-show="showNavPhone" @click="showNavPhone = false")

I'm going to check other animations directly from the xyz website and comment.

[joelAppslabs]

It seems that in all IN animations it makes the same error.

[mattaningram]

Do you see the same issue in Safari for MacOS?

[joelAppslabs]

No, in safari from macbook air the error does not happen and in safari for iphone it does not happen either.

It is only in chrome ios.

[mattaningram]

That's very strange since Chrome for iOS is just Safari wrapped in a different UI, should behave identically. Any chance you can make a code sandbox for your menu example? Maybe we can fix that, but hard to fix the issue you are seeing in our docs without being able to recreate it on my side.