[Resolved] Possible conflict with Visual Composer

[Peter Islin Nielsen]

Hi Tom,

I’ve been struggling with this weird issue for a few days now, and I can’t figure out what the heck is going on…

I’m developing a site based on GeneratePress (as a child theme) where some of the pages are layed out with the Visual Composer plugin – yeah, I know you probably hate it, but it’s really client friendly 🙂 Everything is great in the backend. No conflicts, it’s just all good. But when I’m viewing the frontend of the site from an iOS device with either Safari or Chrome (Opera Mini works as it should), all links on the pages made with Visual Composer needs to be clicked twice in order to function. It kinda stops at hover.

At first I thought it was related to my own CSS (z-index values, transitions or hover states), but this doesn’t seem to be the case. I’ve tried to alter my CSS in different ways without success. I’ve even tried to upload an empty style.css file, but still no luck.

If I switch my theme to GeneratePress, the problem remains. And if I deactivate the GP Premium plugin, the problem disappears on GeneratePress and Twenty Fifteen, but remains on my child theme (even with a blank style.css file).

I’ve talked to the support at WPBakery/Visual Composer and even tried this solution (http://snippets.khromov.se/disable-css3-animations-for-ios-devices-in-visual-composer/) by Stanislav Khromov. It didn’t help. Maybe you have an idea?

The issue occurs here (build with Visual Composer):
http://inges-kattehjem.dk.linux84.wannafindserver.dk/vores-sag/

But not here (not build with Visual Composer):
http://inges-kattehjem.dk.linux84.wannafindserver.dk/nyheder/ut-quis-pharetra/

Thanks in advance 🙂

[Tom]

Hi there,

So this is only happening on iOS devices?

If you do a search for “iOS html link double tap” you’ll see a lot of people having similar issues.

This stackoverlow article has one solution that has a lot of votes: http://stackoverflow.com/questions/3038898/ipad-iphone-hover-problem-causes-the-user-to-double-click-a-link

May be worth checking out 🙂

[Peter Islin Nielsen]

Hi Tom,

Thanks, I’ve tried it. It solves the initial double tap issue, but new ones emerge instead – isn’t it always like that… 🙂 When applied, it breaks the Ajax functions on my WooCommerce buttons. I can live with that, but it also ruins swipe/scroll if you’re touching (not clicking) a link when scrolling a page. This creates a really distracting user experience, so I don’t think it’s usable. To avoid that, I tried to apply special link classes, but I think it’ll be a nightmare to maintain.

Any other ideas? 🙂

[Tom]

Just checked it out on my iPad, I don’t see how anything in GP Premium could be causing this issue really.

It definitely has something to do with the transition of the button. If you put a regular link on the page, it works, correct?

[Peter Islin Nielsen]

Nah, I’m puzzled too. I’ve just put a regular link on this page and the problem is the same: http://inges-kattehjem.dk.linux84.wannafindserver.dk/vores-sag/vores-arbejde/

I’ve tried to deactive GP Premium and swith to GeneratePress (my parent theme) again, but now it doesn’t solve the problem anymore – I thought it did yesterday. Now the links on VC generated pages only work if I switch to Twenty Fifteen with GP Premium deactivated. I’ve also tried to deactive the addons in GP Premium one at a time, but it doesn’t help either. And of course I’ve tried to deactivate all my other plugins – without success.

Funny thing is, though, that this issue seems to be related to Safari and Chrome on iOS devices only…

[Tom]

Let me look into this some more – super weird.

[Tom]

So when you deactivate GP Premium, this issue goes away?

Can you deactivate each individual add-on one by one on the “Appearance > GeneratePress” page and see when the issue disappears? This will help us narrow it down a bit.

Let me know 🙂

[Peter Islin Nielsen]

Sorry, I can see now that my earlier reply was a bit unclear. The problem persists even though GP Premium is deactivated. I’ve also tried switching back to the GeneratePress parent theme, but it doesn’t help. The only thing that can make it go away is to deactivate GP Premium and switch to Twenty Fifteen. So it seems to be related to something in GeneratePress – and not necessarily GP Premium.

I’m just thinking a bit out of the box here: I see that Visual Composer adds “js_active”, “vc_desktop” and “vc_transform” to my HTML tag classes on desktop, and “js_active”, “vc_mobile” and “vc_transform” (twice) when viewed on mobile. Funny thing is that if I switch to Twenty Fifteen, the class “js” is added before the other classes.

Code from GeneratePress (parent and child)
<html class=” js_active vc_desktop vc_transform “ prefix=”og: http://ogp.me/ns#” lang=”da-DK”>

Code from Twenty Fifteen:
<html prefix=”og: http://ogp.me/ns#” class=”js js_active vc_desktop vc_transform “ lang=”da-DK”>

I don’t know if this is any help to you, but could it be related to Modernizr in some way? I think that VC may rely on it in order to work properly…

[Tom]

Hmm, GP doesn’t add any classes to the html element, so I’m assuming that’s all VC doing that. Not sure why it wouldn’t be adding the js class though – did they have any ideas?

The only thing in GP I can think that could be causing issues is the subtle transition we have on links.

You can remove the transitions with this CSS:

a,
body,
button,
input,
select,
textarea {
	-webkit-transition:all 0s ease-in-out;
	-moz-transition:all 0s ease-in-out;
	-o-transition:all 0s ease-in-out;
	transition:all 0s ease-in-out;
}

Maybe that will be the difference?

[Peter Islin Nielsen]

They said it was theme related (we ruled out the plugins as I disabled them all first). I’ve tried with a few other themes as well, and this issue only occurs with GeneratePress. So I guess they’re right. Unfortunately 🙂

I’ve tried with the CSS snippet above, but it doesn’t make any difference. I’ve even tried to strip out all CSS from the style.css files in both GeneratePress and my child theme. That didn’t help either. So I guess isn’t CSS related… Maybe JS?

[Tom]

You took away all of the GP CSS? And still nothing?

I can’t think of anything JS related that would do something like this.

If I want to re-create the problem, I just need to use VC on a page and add a link within it?

[Peter Islin Nielsen]

Yep, I stripped the style.css file down so it only contained the necessary header information. I did it in both GeneratePress and the child theme, but the issue remained. It’s super weird.

And yes, if you want to re-create the issue, you need VC on a page and then just add a link to it. But since VC is a premium plugin, you would have to obtain a lincense first. But before you do that, I would like to test my own VC on a another install with GP. I don’t think you should spend 34 bucks on VC if I can’t re-create the problem on multiple sites. So stay tuned, I’ll let you know if I’m able to re-create it myself…

[Tom]

Thanks, appreciate it! 🙂

[Peter Islin Nielsen]

Hi Tom,

I’ve just tested on a different server with a fresh install of GeneratePress, GP Premium and Visual Composer – and unfortunately the issue remains. Take a look here: http://essens.info/dev/om-esssens/

[Tom]

Is that just a test page? Any chance I can get temp admin access so I can debug?

[Author]

Posts