Flipcard mobile function behaving different from desktop

[sevenbe8]

Hi there,

I've got Flipcard on Joomla. I've created an element with three buttons which I want on the back of the flipcard (in YOOtheme pro) and copied the HTML into the content of the back of the flipcard element.
On the desktop, it works perfectly. On the mobile however, when I hover over the front, nothing happens. When I click on it, which probably means I need a version for mobile with a click here button, it jumps to the top of the screen. Then I scroll down and the buttons are there on the reverse. When I click any one of them, it then shows the front first and only then it jumps to the link.

I appreciate this may just be user error but wondered if you have any suggestions for solving this.
I made a screen recording to demonstrate.

https://www.dropbox.com/s/750wdpdsxniwu44/RPReplay_Final1653476809.mov?dl=0

What I'd like to happen is that it stays in position when you swipe / click on the front.
And that it won't flash before sending you to a link.

Thank you!
Regine

Yootheme pro 2.7.22
Joomla 4.1.4
Safari on iPhone lastest version

[Thomas Weidlich]

Hi Regine,

On the mobile however, when I hover over the front, nothing happens.

Hover to flip will only work if the pointer type of the event is not touch, For touch devices, there are touch events. So if you are using an iPhone and have set Flip Mode Touch to Tap (default), the card should flip once it has been touched.

When I click on it […] it jumps to the top of the screen.

I am sorry, but I could not reproduce this behaviour with an iPhone 13 and Safari 15.4. Screencast

Then I scroll down and the buttons are there on the reverse. When I click any one of them, it then shows the front first and only then it jumps to the link.

This behavious should change with this commit which will be included in the next release. If you click on a link (<a>) on the back of the card, it will no longer flip back.

Kind regards
Thomas

[sevenbe8]

Hi Thomas,  Thank you so much for the info. I will install the new release and see if that fixes point 3.  Point 2 makes sense, I will install an element with a ’swipe’ or similar action button so people know what to do on mobile. My biggest concern is 1 since you can’t replicate it.  Could I possibly send you the credentials to have a look in situ on the test site?  Kindest regards Regine Essence  | Brand Strategy and Design 26 College Hill, Sutton Coldfield B73 6HA Mob [phone] | www.essence-design.co.uk Follow our Instagram  | Read our Blog  | Find me on LinkedIn

…

On May 25, 2022, at 3:07 PM, forrestkirby ***@***.***> wrote: Hi Regine, > On the mobile however, when I hover over the front, nothing happens. > > Hover to flip will only work if the pointer type of the event is not touch, For touch devices, there are touch events. So if you are using an iPhone and have set Flip Mode Touchto Tap(default), the card should flip once it has been touched. > When I click on it […] it jumps to the top of the screen. > > I am sorry, but I could not reproduce this behaviour with an iPhone 13 and Safari 15.4. Screencast > Then I scroll down and the buttons are there on the reverse. When I click any one of them, it then shows the front first and only then it jumps to the link. > > This behavious should change with this commit which will be included in the next release. If you click on a link (<a> ) on the back of the card, it will no longer flip back. Kind regards Thomas — Reply to this email directly, view it on GitHub , or unsubscribe . You are receiving this because you authored the thread.<embedded image>

[Thomas Weidlich]

Having taken a closer look at the screencast, it seems like the buttons are actually links (<a> elements) with href="#", aren’t they? If so, please try to use a <button> element instead and le me know if that works.

By default, Safari will scroll to the top when clicking on or tapping a link with href="#". Although it might technically be possible to prevent this behaviour, I do not consider it good practice. Moreover, it does not actually make much sense to place a link on the front of a flipcard, in my opinion. Rather use a different element (<button> or <span>) and style this element to appear like a link if needed (e. g. by using the UIkit button classes).

Best regards