bonk.io - "Quick Play Mode Selection" menu is not fully visible.

[webcompat-bot]

URL: https://bonk.io/

Browser / Version: Firefox 89.0
Operating System: Windows 10
Tested Another Browser: Yes Edge

Problem type: Design is broken
Description: Items not fully visible
Steps to Reproduce:
i pressed quick play button and the menu's broken

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20210520185752
• channel: aurora
• hasTouchScreen: false
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue. "Quick Play Mode Selection" menu is not fully visible.

Steps to reproduce:

1. Navigate to https://bonk.io/
2. Click "Play As Guest" button.
3. Click "Play" button without typing any player name.
4. Click "Quick Play" button.
5. Observe the "Quick Play Mode Selection" menu.

Note: The issue is not reproducible on Chrome.

Affected area:

<div id="quickPlayWindow_GrappleButton" class="quickPlayWindowModeDiv">
	<img src="graphics/thumb_grapple_nb.jpg" class="quickPlayWindowModeThumb">
		<span class="quickPlayWindowText1">Grapple</span>
		<span id="quickPlayWindow_GrapplePlayerCount" class="quickPlayWindowText2">37 players online</span>
		<span class="quickPlayWindowText3">Use the special key to swing around the map, but if an enemy touches you while you're on your grapple you'll be knocked off. Static map rotation.</span>
</div>

Tested with:
Browser / Version: Firefox Nightly 90.0a1 (2021-05-27)
Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[ksy36]

The site is using zoom, which is not supported in Firefox:

.quickPlayWindowModeDiv {
  display: inline-block;
  position: relative;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 8px;
  width: 200px;
  height: 310px;
  border: 1px solid #bdbdbd;
  cursor: pointer;
  background: hsl(0 0% 90% / 1);
  vertical-align: top;
  padding: 5px;
  zoom: 0.8;
  white-space: normal;
}

Duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=390936