Find on Page in Mobile Safari shifts content

[Kristian73]

I’m still having an issue where the Find on Page in my mobile (Iphone) Safari will actually push the content left and off the page in order to center a found word (if the word is near the right margin). As a result, the content pushed beyond the margin will be gone unless I find another word that will shift it back - or if I go into Reader View mode.

I’ll post some pictures to show how I get this issue. I’m using this page https://ohiofestivals.net/ohio-festivals/

I go to the page and select the middle icon at the bottom of the page…

…I select the Find on Page feature…

…I use the word “Review” (there are many on this page). The found words in the center or left of center cause no issues.

This “review” - found right of center - has been centered and it cuts off the content near the left margin.

I try to pull the content to the right but the cut-off content is no longer visible.

Thanks again! I hope you are able to duplicate the issue and find a solution.

[nabeel]

Hi @Kristian73,

Thank you for reaching out to us. This might be happening because there is no horizontal scroll in mobile devices as the site is totally responsive so you can fix this by adding a horizontal scroll in safari browser only. To do this first add the following JS script in the Theme Options > JS:

if (navigator.userAgent.match(/AppleWebKit/) && ! navigator.userAgent.match(/Chrome/)) {
   jQuery('body, html').addClass('safari')
}

Then add the following code in the Theme Options > CSS:

.safari {
    overflow-x: auto !important;
}

This way you’ll have a horizontal scroll bar so you can see your whole content by horizontally scrolling. Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[Kristian73]

Okay. That did not work.

Maybe there’s a conflict with other CSS code?

I don’t think I should NEED to scroll horizontally. The Find on Page option should be able to highlight the word without moving the text/content at all. Is there a way to do that (lock the text in place)?

Thanks!

[rad]

Hi @Kristian73,

It can’t be CSS conflict since it’s browser functionality, it’s part of the browser search functionality and can’t be overridden by CSS or javascript.

And as you can see from your screenshot, texts are properly breakdown to multiple lines so there is no overflowing content. And even the ad is clipped, so there is no reason for it to scroll horizontally. It’s just Safari like to focus the result that way, like and similar with zoom effect for small text fields. Though I can’t really predict this kind of behavior of Safari, sometimes it’s okay and sometimes it’s not, maybe there are hidden wide content too. Could you try removing the ads and test it again?

Thanks!

[Kristian73]

I removed the ads and deleted cache and the same problem occurs.

Okay, so is this basically a Safari issue then? Are there any other possible solutions or do I have to depend on Safari’s functionality?

Thanks!

[ruenel]

Hello @Kristian73,

I have also checked your site in an android phone and this is what I got.

I also see several JS errors on the pages. Since you already cleared the caches, please temporarily deactivate any caching plugin including WP Autoptimize plugin. You may test the site in Chrome’s Incognito mode after disabling the plugins.

Hope this helps. Please let us know how it goes.

[Kristian73]

So, in your image, the border is cut off with a yellow bar?

Could this be a margin issue?

[christian]

Hey @Kristian73,

Sorry for the confusion here. Rad is correct. This is not an issue. What you experienced is just the behavior of the browser. We could not do anything with it. Rad only asked to try removing your ads to see if it further affects the display.

The yellow bar in Ruenel’s screenshot is the behavior of Chrome and that can’t be overridden nor taken into account. It’s also not really a yellow bar but because the are many “review” text in the page, those are highlighted in the bar much like the find behavior in desktop.

I’m sorry but there’s nothing we could do for this case.

Thank you for understanding.