Automattic / Automattic/jetpack

Instant Search: overlay is incorrectly zoomed in & scrolled when using Astra theme on mobile devices

Open
#20,790 0 comments 0 reactions 0 assignees View on GitHub
[Feature] Search [Plugin] Jetpack [Plugin] Search [Pri] Low [Status] Auto-allocated Bug Instant Search Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Impacted plugin

Jetpack

### Steps to Reproduce

1. Open up a testing site with Jetpack Search activated, along with the [Astra theme](https://wordpress.org/themes/astra/)
2. Scroll down to a search widget area, and tap once on the search field.
3. Begin typing your search request, in order to trigger the instant search overlay
4. Notice that the display is zoomed in, and focused a little way down the results. To view the results and search field clearly, you need to zoom out and/or scroll to the top.
5. Keyboard obstruction seems to be a big part of this, so try closing up the keyboard, and check that it does help a lot _(but not completely - it still requires zooming out & scrolling up a little)_

### A clear and concise description of what you expected to happen.

I expect when searching on mobile, after entering part of my search query the overlay will open at 100% without any excess off the screen, and I will be able to see my search query along with the first result(s) at the top of the display.

### What actually happened

When triggering the overlay, I see my screen zoomed in too far and part way down the search results. I am unable to see what I searched for, and if there were no results returned then I see an empty screen.

### Other information

| How it looks | How it should look |
| ------------- | ------------- |
| ![image](https://user-images.githubusercontent.com/30754158/130376625-4ea146d7-eabf-43dd-b53a-6974b6f16287.png) | ![image](https://user-images.githubusercontent.com/30754158/130376700-59b528d3-318b-41d9-97c6-42f23d75acbe.png) |

### Operating System

iOS

### OS Version

14.7.1

### Browser

Chrome/Chromium, Firefox, Safari

### Browser Version(s)

_No response_

Contributor guide

Open the contributing guide

Research direction

The report names no files, tests, or entry points. Reproduce the Jetpack Search overlay with the Astra theme on iOS across the listed browsers, then trace the mobile overlay behavior; done means the overlay opens at 100%, keeps the query visible, and shows the first results without unwanted zooming or scrolling.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, wordpress
Domain
frontend, mobile-dev, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.