CSS Line-height seems to be inconsistantly rendered on FF3 for Macintosh.




Layout: Block and Inline
10 years ago
2 years ago


(Reporter: Amadeus Demarzi, Unassigned)


Firefox Tracking Flags

(Not tracked)





10 years ago
User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9) Gecko/2008061004 Firefox/3.0
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9) Gecko/2008061004 Firefox/3.0

The line-height calculations from CSS are inconsistently rendered, and seemingly arbitrarily in FF3 on Mac.

Reproducible: Always

Steps to Reproduce:
Actual Results:  
The URL I have provided shows this example. If you look closely, there is a 1 or 2px extra black underneath the text, even though they are all inheriting the same CSS rules, and they are the same CSS tags/text.

Furthermore, it should be noted, that in most other browsers, Safari, IE, etc, the text actually subtly bleeds out the bottom creating no 'extra 1/2px' black underneath the text.

I have provided a rendering from Webkit as how I think it is 'supposed' to render, but you will see similar results in IE6/7 or FF3 Win.

It should also be noted that I did some testing with font sizes and line-heights in PX and no relative (em/%) calculations which still created the same results from the example URL I have provided. If you have further questions let me know.

Expected Results:  
Here is an image of how it should occur, FF3 on Win is very similar to this as well.

(I am filing this because a web design I am working on requires a better precision in line-heights and therefore it would be awesome to see it fixed :) )

Comment 1

10 years ago
An update, upon further testing and review, the problems lies in combination with Helvetica as the chosen font. When Arial is used, there are no problems, it renders as expected.
I can reproduce this, but don't understand it.

I see the problem in FF2 and FF3 on OS X, but not in either FF2 or FF3
on Windows or Linux.

I don't see the problem in Safari (on OS X).

Interestingly, I do see something like this problem in Opera 9.51 on

Possibly related to bug 447615.

Seemingly a font issue (if changing from Helvetica to Arial can make
the problem go away).
Ever confirmed: true
Component: General → Layout: Block and Inline
Product: Firefox → Core
QA Contact: general → layout.block-and-inline
This may well be correct behavior; the CSS 'line-height' property is really about "inline height", not "line height".

Comment 4

9 years ago
Well, the issue is that even with identical styling and identical html elements, there are inconsistencies between them.

I would normally expect at least one consistent styling throughout, even if it differs from other browsers, just not differences at a per element level.

Here is a zoomed in image with the areas of concern highlighted:

It should be noted that the html looks like this:
<h1>test text</h1>
<h1>test text</h1>
<h1>test text</h1>
<h1>test text</h1>
<h1>test text</h1>

The CSS is simply a done via an h1 { basic style.

What I have noticed, is that this only seems to occur with Helvetica, with Arial, things fix themselves.
That looks like subpixel positions getting rounded differently.

Comment 6

2 years ago
I see the problem on Linux, having Arial installed.
Arch Linux 64-bit, FF 50.0.2
Severity: normal → minor
OS: Mac OS X → All
Hardware: PowerPC → All
You need to log in before you can comment on or make changes to this bug.