Ethos zoom and scroll issue

Hi,
I use X Ethos for a new customer site.
It is online already.
Now the customer remarks, that there is an issue with zooming and scrolling on mobile devices / smart phones.
I can reproduce it on an iPhone 5 SE with latest iOS and Safari browser.
Once I zoom in by using two fingers, I cannot slide/scroll to the left side, there seems to be an invisible border.
And if I swipe to the right side, there is much more space then should be.
I send you a page link as example in a secure note.
I hope you can see it - pease try a bit zooming and swiping.
Thank you,
Hannes

Hi @salilou,

Thank you for reaching out to us. I was able to replicate the issue on desktop using chrome, you’re having slide/scroll issue because of the custom CSS you’ve in the Appearance > Customize > Additional CSS. Here’s the specific lines of code which is conflicting with the theme:

image

Please remove the above code to fix the slide/scroll issue. If the issue persists then you could try removing all custom CSS and see if this resolves the issue. If you still have issues then please perform the following troubleshooting steps:

  1. TESTING FOR PLUGIN CONFLICT
  2. CHILD THEME
  3. CSS/JS CUSTOMIZATION
  4. DISABLING CACHE
  5. VERSION COMPATIBILITY

If nothing works then please get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thanks!

Thank you - that works! Amazing!
Just another issue is still there:
If I zoom in on a mobile device again in an revolution slider section, then the slider drifts to the right and behaves strange.
You can see it on the main page - see secure note.
Thank you

Hello @salilou,

When I checked your site on my Android phone, I am seeing this:

The slider seems to display perfectly as expected. Kindly clear your phone’s browser cache or use private browsing mode and test your site again. If you have Google Chrome on your phone, test your site using that browser too.

Thank you.
On your screenshots there is no zooming in.
If you zoom in on your device, as you can see it on my screenshot, so that the logo is closer, what happens then?
On my gadget the slider goes left.

Hello @salilou,

If I zoom in, this is what I am seeing on my android phone.

Please make use that you are using the updated iOS and the updated browser.

Thank you.
But on an iPhone SE and on an iPhone 7 plus there it is not OK.
See screenshot in secure note.
I zoom in with two fingers and the Slider area moves to the left side instead of staying centered.

Hey @salilou,

Regretfully, there is nothing we could do regarding that behavior because it happens only on certain smartphone models especially old ones like the iPhone SE and iPhone 7.

If you want a consistent behavior, please don’t use Slider Revolution as it uses Javascript to recalculate the position of the background image. Instead, use a Section Background image in its place as it is widely supported by browsers.

If you use a Section Background Image, you can replicate the slider design by adding a Headline and Button elements in the Section. The Button element will act like the scroll to the next section arrow (see https://youtu.be/Pn1BZQdOQTY).

Hope that helps.

Thank you for the idea.
On an iPhone 11 there is the issue too - see screenshot in the secure note.
It seems to be an actual issue, not only on older models.

Hi @salilou,

Yes, I can replicate your issue on my iPad device too. I suggest that you follow what my colleague said by creating a new section and add a section background mage then use the Headline and Button elements to replicate the design.

Hope that helps.

Thank you.

The same issue is on iPhone with Firefox browser.
Is it a Revolution slider issue?

Hey @salilou,

Yes, this is an issue with Slider Revolution. We can report this to the creator of Slider Revolution but we can do nothing on our end for this case as this would require changing the code of Slider Revolution itself. This can’t be fixed by simple CSS nor Javascript. One last thing I’d like for you to try is you disable the slider’s parallax feature.

This is why I’ve previously said that it’s best that you use a Section Background Image. Not only that this method is many times lighter in terms of page weight compared to using Slider Revolution, it doesn’t use Javascript so there will be no recalculation that will happen so error in displaying the layout would be unlikely.

Thank you for understanding.

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