search

ingram-projects / animxyz

The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.
https://animxyz.com
MIT License
2.41k stars 56 forks source link

It doesn't work properly on chrome iphone. #86

Open joelAppslabs opened 2 years ago

joelAppslabs commented 2 years ago

Framework, vue 3.

version XYZ: v0.6.5

I have checked it with different devices:

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

mattaningram commented 2 years ago

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 commented 2 years ago

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.

https://user-images.githubusercontent.com/29442292/151402378-f6b4a716-e10d-481b-97b6-35aa91288098.MOV

joelAppslabs commented 2 years ago

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

https://user-images.githubusercontent.com/29442292/151403781-b79a8f12-6f34-40d1-8f45-f20dea4ff0be.MOV

mattaningram commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

mattaningram commented 2 years ago

Do you see the same issue in Safari for MacOS?

joelAppslabs commented 2 years ago

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 commented 2 years ago

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.