I created some toggle buttons and added transitions to them. These work fine on desktop (tested on macos Safari and Firefox), but not on iOS (safari). Does anyone have an idea which kind magic dust I need to sprinkle to get it working. See attached videos to clearly see the difference. The videos are both taken from the live app and not from testing in editor, one is from MacOS Safari and the other - not so good one - from iOS Safari.
✅1
Max
1 year ago
There is no magic involved, usually. Can you share a few screenshots of your project or the project link?
The click event is on the div that's wrapped around the button. The button has the transition (see CSS in screenshot) and I use style classes on the button and the div inside the button.
Do you have any transition on the inner div? If you change it's props, this one needs the transition, too. Also, animating position is not efficient on all devices. I'd go with translate, as this is hardware accelerated, usually
Yes, both the button and the inner div have transitions. Ok, I will play around with translate. I've never used it before, so let's see 🙂
Armand
1 year ago
I've set my translate value on the inner div's alternative style class and used this on the inner div's CSS: transition: translate 900ms ease 600ms normal And it behaves according to those values on desktop, but not on mobile (where it is exactly as in the video I shared above). @Max did I do it correctly and is it something else that is causing this?
For anyone reading this later and wondering what was the issue: It works as it should on my newer iPhone, just not on my old iPhone X, which is what I was testing on. Not sure why, but given the age of the X I am not too bothered to find out.
.jpeg/public)