sort.chimame.cafe - Disc is inflated an the wrong size

[karlcow]

URL: https://sort.chimame.cafe/

Browser / Version: Firefox 107.0
Operating System: Mac OS X 10.15
Tested Another Browser: Yes Safari

Problem type: Design is broken
Description: Items are overlapped
Steps to Reproduce:

1. Go to https://sort.chimame.cafe with Firefox on macOS

Expected: disc in the center column

Actual:
the disc is inflated at the wrong size.

View the screenshot

Browser Configuration

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

View console log messages

From webcompat.com with ❤️

[karlcow]

from top to bottom

safari, firefox, chrome.

[karlcow]

The code is using

.home-img {
	max-width: -webkit-fill-available;
	border-radius: 300px;
	user-select: none;
}

it could be fixed with

/* styles.css | https://sort.chimame.cafe/src/css/styles.css */

.home-img {
  max-width: -moz-available;
}

[softvision-raul-bucata]

@karlcow Thanks for the report. I was indeed able to reproduce the issue:

Tested with:

Browser / Version: Firefox Release 105.0.3 (64-bit)/ Firefox Nightly 107.0a1 (2022-10-11) (64-bit) /Safri 15.6
Operating System: Mac OSX Catalina 10.15.7

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 Safari.

Moving this to NeedsDiagnosis for further investigations.

[qa_41/2022]