[Resolved] Small hover problem on iphone

[Hernan]

Hello, I have a problem only with iphones. It turns out that in my home I have several containers with a hover effect (decorative only). On android devices it behaves well but on iphone sometimes double tap is required

I am aware that I shouldn’t really use :hover effect on mobile devices but :active works much worse, no transitions can be applied and the result is very jerky. Is there an alternative path? Could you consider checking for future versions of the theme? I think that eventually this could happen to more people

Thank you !

Kind regards !

[David]

Hi there,

that content isn’t added by the Theme, it looks like its from Toolset ?
So you would need to address that issue with that plugin developer…. which leads to the bigger picture.

There are two main options here:

1. DO NOT apply those hover effects on tap devices. The developer can wrap the styles in @media queries to control that.

2. Use a Javascript library to handle hover/tap events on mobile. But this is a nightmare, as apart from configuring for each purpose it will take a lot of maintenance to make sure it works on all current and future tap devices.

Option 1 makes the most sense in these scenarios.

[Hernan]

Thank you very much, I will meditate on option 1

It is correct, they are Toolset containers, although a few months ago I did some tests with other themes and the hover effect worked on iPhones (same scenario, toolset containers). But those other themes had horrible integration with bbpress (plus GeneratePress is lighter and has excellent support =), of course )

For now I think that with @media I can target only iphone and remove hover only them. I will investigate this path

Thanks

[David]

You’re welcome

[Hernan]

I found a solution!

To the image that is displayed when hover is applied I added the following property:

pointer-events: none;

Now the hover effect works fine on both android and iphone. Although of course the image now would not show title when the cursor is hovered (which is often also desirable)

[David]

Glad to hear you found a solution 🙂

[Author]

Posts