Safari iOS issue

Support
#1

Hey folks,

I posted something in this vein before, and thought that I had figured it out… but unfortunately it seems like that is not the case.

Hopefully someone sees what’s going wrong?

If you navigate to https://redcowmn.com on an actual iPhone, you’ll see what I’m getting at—none of the linked buttons or accordions work, or they’re very difficult to press. You have to do it on an actual iPhone—iPhone simulator or an Android everything works great.

I think this is part of the Mobile Safari Double Tap issue, but I’m not sure. I’ve got 25+ sites on X and this is the first time that I’ve come across this problem.

Any thoughts?

Thanks.

Luke

#2

Hey Luke,

In your previous thread, you posted the links to resources which say that if an element has a hover style, it causes the double tap issue in iOS. I have not realized that back then because when I hovered on the images in your menu, they look like they don’t have a hover style.

I’ve investigated further now and saw that they actually have a hover style.

Regretfully, we do not have resources to solve device specific issues as support staff. Moreover, our development team must know about this case so what I will do is post this in our issue tracker.

For now, please try changing those Classic Accordions to V2 and see if the behavior persists.

Either way though, we would need to wait for our development team’s feedback on this.

Thanks.

#3

Thanks for sticking with me Christian.

So, testing with a friend last night and this morning, the issue seems to be a bit weird than the Double Tap issue:

If you tap in the upper left corner of any of the elements (images, accordions, etc.), it works perfectly—exactly as you’d expect it to. Trying the bottom right corner does nothing… I’m guessing that Safari isn’t stretching the <a href=...> across the whole image, or something? Maybe some flex box issue?

I’m digging into this issue this morning and will post any findings here. If you see anything, please let me know!

Thanks.

Luke

#4

Using an iPhone simulator + Dev tools, I can see that the links are fully stretched across the images and accordions… but the A events are not firing. You can see the DOM light up on click, but then nothing. Will continue to dig.

More to come…

#5

The menu drop down doesn’t seem to be working very well either—it hovers, but doesn’t fire. Especially on submenus.

This makes me think that perhaps there’s an issue with links in general?

The only links that seem to fire consistently without fail is if I write them in raw content, which is a pain and kinda defeats the point of X, but if that’s the workaround…

And again, this only happens on Safari iOS and it appears that my custom code is clean (ran it through W3 Validator).

Any assistance would be much appreciated.

Thanks.

#6

OK, a few updates:

As a stopgap, I’ve hidden a bunch of the issue blocks and replaced them with raw content for the time being. All my testing is being done over here: https://redcowmn.com/testing-safari-ios-issue/

If we could just get the Images to work, that would be a big step forward (or even the footer menu).

I’ve never seen this issue before (I have 25+ X sites), but it’s very troubling for the theme. This shouldn’t be a complicated thing—we’re just trying to wrap an image in a link or link a button. In fact it’s the building block of the internet. Anyway, this has been a frustrating day.

Thanks.

#7

Hey Luke,

Thanks for the additional info.

Basing on the article you posted previously, this issue is only on links with hover effects. The link does not activate because it first does the hover. It is mainly a problem with iOS / Safari because they have a different behavior for the hover.

I already have posted this in our issue tracker. We would need to wait for the development team to get into this issue.

Also, it’s weird that this is the first time that this issue was reported.

Thanks.

#9

Thanks Christian.

Yeah, it’s totally weird. I’ve had nothing but great results with X Theme, so it’s surprising to encounter this.

I have to keep digging, but it might be easiest for your Dev team to focus on the Footer Menu. That’s standard X Theme output, and it has the same issue that we’re seeing throughout the site.

Also, I’m willing to throw a few hundred bucks at a developer’s time—either paying Themeco for a special investigation or if one of your developers wants to take a look afterhours.

Thanks.

#10

You are always welcome.
We really appreciate your understanding.

#11

The mystery has been solved!

I had a content modal popup on the page that was acting as some kind of persistent pseudo-ghost element—you could see through it, you could touch links… but it didn’t let you click through. Remove the modal, poof, issue gone. (Good for me, I didn’t want that modal in the first place :).

So strange.

Anyway, that might be something to put in the issue tracker: content modal, at times, acts like a persistent pseudo-ghost element on mobile Safari, preventing links from working.

Thanks for sticking with me.

#12

Hello There,

It has been noted and added to our issue tracker to inform our developers.

Regards.

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.