www.google.com - Flip again/Flip button is misaligned

[peat-psuwit]

URL: https://www.google.com/search?q=coin+flip

Browser / Version: Firefox 115.0
Operating System: Linux
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items are overlapped
Steps to Reproduce:
The problem is with the "Flip again" button. Internally, they're 3 consecutive <button> tags, in which 1 is shown at a time and the rest is hidden as zero-sized. Manually injecting display: block; to all 3 of them seems to workaround the issue.

I seem to be able to reproduce the issue with this simple HTML file, although the result is not as dramatic as in the page.

https://gist.github.com/peat-psuwit/ffb9f9acd1cb6fe23cf997a8777dbf95

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-raul-bucata]

We appreciate your report. I was able to reproduce the issue. The button is misaligned. This is best observed in the Nightly version:

Tested with:

Browser / Version: Firefox Release 115.0.2 (64-bit)/ Firefox Nightly 117.0a1 (2023-07-20) (64-bit) /Chrome Version 114.0.5735.199 (Official Build) (64-bit)
Operating System: Ubuntu 22.4 LTS x64

Notes:

1. Reproducible regardless of the status of ETP.
2. Reproducible on the latest build of Firefox Nightly and Release.
3. Works as expected using Chrome.

Moving this to NeedsDiagnosis for further investigations.

[qa_29/2023]