1891883 - Mis-sized checkbox on android in https://offworld.cc/scan/

Status: NEW

(Core :: Layout, defect)

Comment 1

[Daniel Holbert [:dholbert]]

[assuming S3, but feel free to adjust if you disagree, pending details here.]

STR:

1. Load https://offworld.cc/scan/ in Firefox on Android, in portrait mode.
2. Click "Scan now" (warning, it'll play some audio)
3. Look at the checkboxes on the final page.

ACTUAL RESULTS:
Checkboxes look absurdly large; they overlap each other, and cover up the "S" in "Send".

EXPECTED RESULTS:
Checkboxes shouldn't be quite so big (maybe overlapping part of the "S" in "Send", but not more than that, and not overlapping each other).

Firefox Nightly for Android gives ACTUAL RESULTS.
Chrome on Android, and Firefox and Chrome on Desktop (in responsive design mode) gives EXPECTED RESULTS.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of Firefox on Android (showing the bug)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: screenshot of Chrome on Android (no bug)

Comment 4

[Emilio Cobos Álvarez (:emilio)]

It seems like a font inflation issue. If I disable font inflation then the checkbox is correctly sized.

Comment 5

[Jan Henning [:JanH]]

Instead of properly setting viewport width=device-width and then properly handling viewport width changes, the page just bumps up the font size using a special mobile stylesheet (based on a max-device-width media query) to compensate for the fact that on a mobile phone 980 CSS px (the standard desktop mode viewport width) will be crammed into the actually available screen width (usually around 300 to 400 CSS px in portrait mode).

It doesn't adjust the font-size of the checkbox input controls, though, because normally the font-size won't have any influence on the checkbox's display – except that behind the scenes, we do use the font size for running font inflation and inflating the checkbox together with its neighbouring text.

As a result, we bump up the size of the checkbox. This would work fine, if the page wasn't also using a scale transform to scale up the checkboxes. Because it does, the margins etc. assumed by the page no longer work out and we get the overlapping checkboxes.

Running a quick comparison, it seems that Chrome possibly doesn't inflate paragraphs/divs/… containing input elements at all. That would side-step this particular issue, but possibly worsen other use cases… (a more targetted workaround would be disabling font-inflation only for elements with a scale transform on it?)