www.google.com - Selected category “X” button is displayed misaligned

[softvision-oana-arbuzov]

URL: https://www.google.com/search?tbm=isch&sxsrf=ACYBGNQc-GllH5ZDGPu-kgHX23huLESjhQ:1575380502414&q=travel&chips=q:travel,g_1:adventure&sa=X&ved=0ahUKEwiZ1e3ZzZnmAhUwn-AKHXetClMQ4lYIECgB&biw=360&bih=631

Browser / Version: Firefox Release 68.2.1 Operating System: Huawei P20 Lite (Android 8.0.0) - 1080 x 2280 pixels Tested Another Browser: Yes Chrome

Problem type: Site is not usable Description: Missing items Steps to Reproduce:

1. Navigate to https://www.google.com/search?tbm=isch&sxsrf=ACYBGNQc-GllH5ZDGPu-kgHX23huLESjhQ:1575380502414&q=travel&chips=q:travel,g_1:adventure&sa=X&ved=0ahUKEwiZ1e3ZzZnmAhUwn-AKHXetClMQ4lYIECgB&biw=360&bih=631
2. Observe selected category “X” button.

Expected Behavior: “X” button is correctly aligned (centered).

Actual Behavior: “X” button is displayed misaligned (top side).

Note:

1. Not reproducible on Chrome 78.0.3904.90.
2. Not reproducible on Firefox Nightly with Chrome UA.
3. Screenshot attached.

Watchers: @softvision-oana-arbuzov @softvision-sergiulogigan @cipriansv

sv; gst2

Browser Configuration

• None

From webcompat.com with ❤️

[karlcow]

ok this one is really an issue.

[karlcow]

This shows there was an attempt at repositioning the character manually.

.D9rmPb {
    position: relative;
    left: 0.5px;
    top: 0.5px;
}

but this could have been done with

/* Inline #3 | https://www.google.com/search?tbm=isch&sxsrf=ACYBGNQc-GllH5ZDGPu-kgHX23huLESjhQ:1575380502414&q=travel&chips=q:travel,g_1:adventure&sa=X&ved=0ahUKEwiZ1e3ZzZnmAhUwn-AKHXetClMQ4lYIECgB&biw=360&bih=631 */

.D9rmPb {
        /* position: relative; */
        /* left: 0.5px; */
        /* top: 0.5px; */
}

.aZATGb {
        /* position: relative; */
        /* top: -1px; */
        display: inline-flex;
        justify-content: center;
        align-items: center;
}

[softvision-oana-arbuzov]

The layout has changed on Chrome and "X" button is no longer available. On Firefox the "X" button is still available and misaligned.

Tested with: Browser / Version: Firefox Nightly 97.0a1 (🦎 97.0a1-20220108220226) Operating System: Google Pixel 5 (Android 12) - 1080 x 2340 pixels, 19.5:9 ratio (~432 ppi density), Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)