742692 - minimum font-size erroneously affects image vertical-align

Status: RESOLVED INVALID

(Core :: Layout: Block and Inline, defect)

Description

[K Chayka]

Attachment: 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.

Comment 1

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

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.

Comment 2

[K Chayka]

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.

Comment 3

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

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.

Comment 4

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

(I think that's an entirely reasonable thing to do, but yes, it does produce weird results with testcases like the one you attached.)

Comment 5

[K Chayka]

So it does not even check that the line-height is already sufficiently large for the actual font-size?

Comment 6

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

No; the intent is to preserve the spacing, so that lines with spacing between continue to have spacing between.

Comment 7

[K Chayka]

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

Comment 8

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

Is this showing up as a problem on a real site somewhere?

Comment 9

[K Chayka]

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.

Comment 10

[K Chayka]

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. :(