A white screen is displayed when a user tries to search a term from the front-end instead of the actual search results modal.
This behavior can also be observed for Jetpack search categories.
After doing some debugging, it looks like the problem comes from the fade-in effect (opacity) set on the body element. The opacity is set to 0 in the style.css and set to 1 on page load, via a JS script. When the user does a Jetpack Search from the UI, the CSS resets the opacity to 0, however, the JS is not executed since it's triggered only on page load, which means a white page is displayed.
Quick summary
The Rebalance theme (https://wordpress.com/theme/rebalance) currently conflicts with Jetpack Instant Search.
A white screen is displayed when a user tries to search a term from the front-end instead of the actual search results modal. This behavior can also be observed for Jetpack search categories.
After doing some debugging, it looks like the problem comes from the fade-in effect (opacity) set on the body element. The opacity is set to 0 in the style.css and set to 1 on page load, via a JS script. When the user does a Jetpack Search from the UI, the CSS resets the opacity to 0, however, the JS is not executed since it's triggered only on page load, which means a white page is displayed.
Also mentioned here: https://github.com/Automattic/themes/issues/4566#issuecomment-927018374
Steps to reproduce
What you expected to happen
The Jetpack search results page to appear
What actually happened
It displays a blank page
Browser
No response
Context
No response
Platform (Simple, Atomic, or both?)
Simple, Atomic, Self-hosted
Other notes
No response
Reproducibility
Consistent
Severity
No response
Available workarounds?
No response
Workaround details
No response