983369 - field label overlaps value because font inflation doesn't inflate the relative positioning

Status: NEW

(Core :: Layout, defect)

Description

[:Margaret Leibovic]

Attachment: 2014-03-13 21.23.43.png

Seen on this test page:
http://www.deque.com/padam/demo-accessible-client-side-form-validation-with-html5.html

Seen on release and Nightly, so not something new.

I just tested in Chrome and it's also messed up looking there, so maybe this is INVALID and just an issue with the page, but it's not an issue on desktop.

Comment 1

[Wesley Johnston (:wesj)]

Attachment: bd.html

This isn't a placeholder. Its just relatively positioned content.

Its using a lot of em units to set that position, and its being font-inflated, which causes things to be positioned wrong. I wonder if we need to recompute style rules using the inflated font values. Do you know dbaron?

Other than that, not much we can do.

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

We don't (and can't) recompute style data based on font inflation.  Really not sure what to do about this; probably worth investigating what other mobile browsers with font inflation do.

Comment 3

[MarjaE]

Is this using zoom, minimum font size, or user css?

I often encounter similar trouble using user css. I think the recommended solution is to switch to full-page zoom, but that creates its own accessibility problems.

Comment 4

[MarjaE]

Possible dupe of bug 912159.