Optimizely preventing interaction on mobile devices. Conflict with Bootstrap?
When I activate optimizely, it seems to conflict with my site when viewed on mobile. If I try to scroll or click on anything, the keyboard appears and it sems to be expecting text input. This happens on both phone and tablet. It appears to be conflicting with bootstrap.
Has anyone found away around this? Bootstrap is really popular so I can't be the only one that's run into this issue. It's completely preventing us from using Optimizely. I don't want to try and find a different service but we seem to be stuck.
Solved! Go to Solution.
Thanks for posting to Optiverse!
I have a few clarifying questions to better understand your post. Firstly, are you referring to an issue you're having with Bootstrap CSS? Also, do you have any running mobile experiments at this time? Looking into those active experiments may help you solve this issue.
A good way to verify if the issue is directly related to Optimizely is to temporarily disable Optimizely by using url parameters. If you apply
?optimizely_disable=true this will disable Optimizely from running on a page. If the problem persists after you do this, then there might be a different root cause.
If the problem is resolved when Optimizely is disabled, then we'll have to dig a bit deeper. Could you give more information about what URLs and mobile devices are displaying this issue?
Yes, we're using bootstrap CSS. Optimizely was working fine on our site before we rolled out our mobile responsive version. We noticed that on touch devices when we interacted with either a tap or swipe, the keyboard would come up.
When we removed the optimizely code snippet from the head, the issue went away. We tried placing the snippet in different places in head to see if that made a different but the issue persisted.
We removed the code snippet so since it makes our site pretty much unusable on mobile.
I haven't seen this issue before, and the iPad keyboard is only possible to be triggered on input boxes .
I did look at the source code of your site a little and saw you have this "#desk-support-box" div which when set to display:block displays a few large input fields.
Do you have any running experiments which could be playing with the CSS properties of this, perhaps causing it to display on Mobile? The Z-Index, or Opacity could still be so it's not visible - but it could cause a keyboard to pop up. Have you tried running Optimizely, with this piece of code (Plugin?) removed?
Otherwise I'm at a loss!
Technical Product Manager - Conversion @ Secret Escapes