Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › Delay on mobile compact search
- This topic has 16 replies, 2 voices, and was last updated 8 months, 1 week ago by
Pixemotion.
-
AuthorPosts
-
September 22, 2025 at 3:46 pm #55535
Pixemotion
ParticipantHi,
I’m having an issue with the compact version on mobile. There’s a long delay between clicking the search button and the box/field opening (around 3 seconds). Why is there such a long delay? This makes users think the search isn’t working.
Is this a performance issue?
Please respond as soon as possible.Regards
September 22, 2025 at 5:05 pm #55536Pixemotion
ParticipantOne important precision:
The long delay happens on Iphone (Safari and Chrome) but I tested it on android (Chrome – Samsug S24) and no problem.September 23, 2025 at 7:56 am #55539Ernest Marcinko
KeymasterHi,
Thank you very much for the details!
I have tried on the suggested device, but it seems to be all right on my end, please see this test: https://www.youtube.com/shorts/vpW16Xoy59A
Just to be sure I have tested on 2 different IOS devices, but on both cases the search opens immediately.Please check if you are using any 3rd party extensions or anything that could interrupt the input. Pleaase make sure to clear the device cache too.
If your phone runs IOS 26, it reportedly has some animation related issues on some models which apple is going to fix in the next update, so that could also be in relation if it happens on your device.
September 23, 2025 at 9:36 am #55543Pixemotion
ParticipantHi,
Thank you for your reply.
I just updated my iPhone to the latest version of iOS and there are no more problems anymore.
Everything works fine!September 23, 2025 at 10:35 am #55546Ernest Marcinko
KeymasterYou cannot access this content.
September 23, 2025 at 11:04 am #55549Pixemotion
ParticipantOne last question
I have 3 different headers with responsive rules (show/hide). One for desktop, one for tablet and one for mobile.
Both desktop and tablet headers have the same search element [wpdreams_ajaxsearchpro id=1]
The mobile header have a different search element [wpdreams_ajaxsearchpro id=2] (a compact version)On a desktop web browser, when I resize my window to be 768px large and under, the search element is not compact like it is defined in the layout settings.
I mean it works fine if I test it on my Iphone, I have a compact search box but not my Imac.
So my question is, is it normal or is there a way to fix it?You can test any page of the website now https://ville.cagnes.fr
-
This reply was modified 8 months, 1 week ago by
Pixemotion.
September 23, 2025 at 11:27 am #55551Ernest Marcinko
KeymasterIf you only resize it, then it will not trigger the update. If you refresh the browser after manual resize, then you should get the apparent output as on mobile.
September 23, 2025 at 11:31 am #55552Pixemotion
ParticipantEven when I refresh several times the browser (tested on safari, firefox, chrome), I still have something weird (see screenshot)
September 23, 2025 at 11:35 am #55554Ernest Marcinko
KeymasterOh I see, you don’t have it enabled for the tablet width but for mobile, but that only triggers below 640px by default.
No worries, just make sure to change the mobile width breakpoint to 769 here: https://i.imgur.com/2ZukjEJ.png
That will do the trick.
September 23, 2025 at 11:43 am #55555Pixemotion
ParticipantI’m sorry but it doesn’t change anything, I still have the same problem.
Do you mind if I give you an access to the back office so you can check it?September 23, 2025 at 11:49 am #55556Ernest Marcinko
KeymasterSure! I will check it for you.
September 23, 2025 at 11:56 am #55557Pixemotion
ParticipantYou cannot access this content.
September 23, 2025 at 12:02 pm #55558Ernest Marcinko
KeymasterYou cannot access this content.
September 23, 2025 at 12:17 pm #55559Ernest Marcinko
KeymasterI may not need access though. I have a much better solution for your case.
The issue is that the width is not taken into account as it is determined by user agent. However if you want to display the search bars based on the device width, then using a custom CSS will be a better solution.
1. Make sure to enable both search bars for all devices.
2. Use this custom CSS to hide them based on the device width:
@media screen and (min-width: 769px) { .asp_w_container_1 { display: block !important; } .asp_w_container_2 { display: none !important; } } @media screen and (max-width: 768px) { .asp_w_container_1 { display: none !important; } .asp_w_container_2 { display: block !important; } }This will hide the compact search when the screen is < 768px and vice versa.
September 23, 2025 at 1:27 pm #55564Pixemotion
ParticipantSorry but it doesn’t work ether… I have the same rendering.
The CSS rules you are provinding doesn’t affect the rendering of the compact search box under 768px after refreshing the browser.
As you can see in the screenshot, there are three sections corresponding to three headers. In mobile resolution, the first two (blue and green) are hidden. They both contain the classic search box.
In orange, the header is displayed in the browser with the compact search box. As you can see, the rendering doesn’t match what it should be.
And if I set the compact search box enabled for all devices, I have both the classic and compact displayed.
Any idea? -
This reply was modified 8 months, 1 week ago by
-
AuthorPosts
- You must be logged in to reply to this topic.