Open Bug 450308 Opened 16 years ago Updated 2 years ago

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

Categories

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

Product:
Core
Component:
Layout: Block and Inline
Type:
defect

Tracking

()

People

(Reporter: amadeusdemarzi, Unassigned)

References

(
URL
)

Details

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:
1.
2.
3.
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.
http://dl.getdropbox.com/u/18782/lineHeightCorrect.png

(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 :) )
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
OS X.

Possibly related to bug 447615.

Seemingly a font issue (if changing from Helvetica to Arial can make
the problem go away).
Status: UNCONFIRMED → NEW
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".
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:
http://dl.getdropbox.com/u/18782/lineHeightExample2.png

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

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.
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
Severity: minor → S4
You need to log in before you can comment on or make changes to this bug.