Flip card buttons on iphone

Support
#1

Hello. I just completed a layout of 24 flip cards using loopers and dynamic data to pull in the content. The button on the back of each card is linked to press articles. I just learned that the buttons do not work on iPhones, while they function perfectly on droid OS. I’m in a bit of a situation now as I cannot deliver this website to my client unless these buttons function on all devices.

Are you aware of this situation? I do not find other posts about this here on the forum, but it is noted on the user Facebook Group. Please advise. Thank you.

#2

Hey @mcaravaglia,

Thanks for writing in! Can you please share the URL of the page where we can find those card? We need to check your element structures. It could just be z-index which buries the buttons which made it unclickable.

We would also love if you can give us access to the page or your staging area so we can investigate the issue.

Best Regards.

#3

Thank you. I hope you can resolve this. I’m not sure about an index issue, as it is only on iPhone not working. It is fine on my Windows Desktop and Samsung phone. I do not have IOS Desktop computer to check.

Login credentials were saved in Secure Note.

#4

Hey @mcaravaglia,

I checked on iPhone 14 and 12 and the button on the back of the cards are working. What iPhone model, OS and browser name and version are you using?

#5

My wife has an iPhone 14 running OS version 16.5.1 ( the latest version) and the buttons on the flip-cards are not working. I have also had other users report the same issue on their iPhones. What OS version are on the iPhones you are using to view?

#6

Hey @mcaravaglia,

I viewed on 16.2. We check on 16.5 once we are able to set it up.

Please stay tuned.

#7

Thank you.

#8

You’re welcome.

#9

Hi. Have we concluded this is a bug in X? I need to explain to my client if I can’t deliver the flip cards working on iPhone. Please let me know.

Thank you.

#10

Hi @mcaravaglia,

As my colleague says that we are going to check it in the 16.5 version, and if the issue is found, we will report it to our issue tracker.

Thanks

#11

Understood, thank you. I was just trying to understand the timing on this.

#12

You are most welcome.

#13

It has been 5 days since I made this inquiry. Is there any movement on upgrading an iPhone to the current version? I need to answer to my client who is waiting for me to deliver their website. The site is complete and ready to launch, except for what appears to be an issue with buttons on iPhones running the latest version.

#14

Hi @mcaravaglia,

The reported issue is very unique and not easy to replicate. Still, I will check with our development team on this and let you know about it.

Thanks

#15

Hey sorry I wasn’t able to recreate this or find a 16.4 safari version, but I see it now. I wasn’t able to write a hack for you, as it needs to know the card state. x-card-faces is hijacking the button touch event, CSS was not helping. I’ll take a deeper look next week.

#16

Hi. So you know, this isn’t just Safari; Chrome too on IPhone. Clearly an issue with buttons (at least on Card elements) in the latest release of the IPhone OS.

1 Like
#17

Hi @mcaravaglia,

As my colleague says, we are able to replicate the issue, and he will take a look into it. We will also check other browsers too.

Thanks

#18

Hello,

Can we try some testing on this site? On my site I was able to get to this working with a newer iPhone on Chrome and Safari. We can add this to Page CSS. The gist is the flipping is handled by the faces and not by the container. Let me know if this helps. A similar fix would go into the release if this works.

.x-card-faces {
  transform: unset !important;
}

.x-card-face {
  transition-property: transform;
  transition-duration: 750ms;
}

.x-card-faces .is-back {
  transform: rotateX(180deg);  
}

.x-card.is-active .is-back {
  transform: unset !important;  
}

.x-card.is-active .is-front {
  transform: rotateX(180deg);  
}
#19

Sorry for the delay. I have been traveling. I just tested this in Chrome and Safari and it does indeed work! Thank you so much.

1 Like
#20

Awesome to hear and happy to help. We will get this bug fix setup for all flipping in a future point release. This only will flip upward as a heads up. Have a great weekend!