minimum font-size erroneously affects image vertical-align

RESOLVED INVALID

Status

()

Core
Layout: Block and Inline
RESOLVED INVALID
6 years ago
6 years ago

People

(Reporter: K Chayka, Unassigned)

Tracking

14 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

6 years ago
Created attachment 612512 [details]
reduced test case

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:14.0) Gecko/20120405 Firefox/14.0a1 SeaMonkey/2.11a1
Build ID: 20120405003040

Steps to reproduce:

This happens on the latest Seamonkey nightly build but has been in existence for some time. The issue is also apparent in Firefox 10 and 11. Safari on Windows does not exhibit this behavior.

Image vertical-align is erroneously affected when the browser's minimum font-size is applied. Test case has a 300x300px image that should be vertically centered within a 400x400px div:
- body {font-size:10px}
- div {width:400px;height:400px;line-height:400px}
- img {vertical-align:middle}

Set browser minimum font-size pref to be anything larger than 10px


Actual results:

The image vertical alignment is not centered, but shifted down proportionate to the amount the minimum font-size exceeds 10px, IOW the larger the minimum font-size, the farther down the image is positioned, like it's scaling the 400px line-height along with the font-size.


Expected results:

The image should be vertically aligned within the specified 400px line-height. When minimum font-size is disabled, the behavior is as expected.
Attachment #612512 - Attachment mime type: text/plain → text/html
vertical-align in this case is aligning the image relative to the text:  it's supposed to align the vertical midpoint of the image with the midpoint of the x-height of the text, as described here:
http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

With a small font size, the half-leading (i.e., extra space around the text to make it fill the line-height) leaves the middle of the x-height pretty close to the center of the box -- but as the font size gets larger you'll notice that it's actually slightly below the center, and the larger the font size, the more below the center it should be.

So I think our behavior is correct per CSS 2.1.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → INVALID
Component: Style System (CSS) → Layout: Block and Inline
OS: Windows XP → All
QA Contact: style-system → layout.block-and-inline
Hardware: x86 → All
(Reporter)

Comment 2

6 years ago
The note on the W3C page referenced, regarding line-height:
"When there is only one value of 'line-height' for all inline boxes in a block container box and they are all in the same font (and there are no replaced elements, inline-block elements, etc.), the above will ensure that baselines of successive lines are exactly 'line-height' apart."

So what are the rules for replaced elements, like images?

The parent box font-size is 10px, the x-height ~5px, more or less depending on the actual font. Even if the 400px line-height were adjusted for a 17px minimum font-size (my own browser default), the x-height would only change by 3 or 4px, would it not?

That is not the case here. With a 17px minimum font-size, the image is shifted down over 100px, putting the top of the image in about the vertical center. That can't be correct behavior.
Ah, yes, I see.

So the bigger effect here is that when we enforce a minimum font size, we multiply the line-height by the ratio of original font size / enforced minimum, so that there's enough room for the text.
(I think that's an entirely reasonable thing to do, but yes, it does produce weird results with testcases like the one you attached.)
(Reporter)

Comment 5

6 years ago
So it does not even check that the line-height is already sufficiently large for the actual font-size?
No; the intent is to preserve the spacing, so that lines with spacing between continue to have spacing between.
(Reporter)

Comment 7

6 years ago
So it's zooming even though there is no real need to

<sigh> ...another side effect of sites using microfonts :(

Can't say I like it, but thanks for the info
Is this showing up as a problem on a real site somewhere?
(Reporter)

Comment 9

6 years ago
I had suspected this was what was happening with Facebook's latest photo viewer, but FB is apparently setting line-height in em units so the photo positioning is understandably askew. The issue came to light with a password-protected project being developed for a client--not for public consumption. I found a work around but wanted to report the bug in the meantime. Thanks again for the explanations.
(Reporter)

Comment 10

6 years ago
FWIW, I still think this is a bug, primarily because every other browser I've checked that has a minimum font-size setting vertically centers the image as expected. Only gecko does not. :(
You need to log in before you can comment on or make changes to this bug.