Delay on mobile compact search

[Pixemotion]

Hi,

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

[Pixemotion]

One important precision:
The long delay happens on Iphone (Safari and Chrome) but I tested it on android (Chrome – Samsug S24) and no problem.

[Ernest Marcinko]

Hi,

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.

[Pixemotion]

Hi,

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!

[Ernest Marcinko]

You cannot access this content.

[Pixemotion]

One 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.

[Ernest Marcinko]

If 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.

[Pixemotion]

Even when I refresh several times the browser (tested on safari, firefox, chrome), I still have something weird (see screenshot)

[Ernest Marcinko]

Oh 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.

[Pixemotion]

I’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?

[Ernest Marcinko]

Sure! I will check it for you.

[Pixemotion]

You cannot access this content.

[Ernest Marcinko]

You cannot access this content.

[Ernest Marcinko]

I 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.

[Pixemotion]

Sorry 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?

[Author]

Posts