1043267 - Wrong page rendrering with minimal font size

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Cédric Bellegarde]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:30.0) Gecko/20100101 Firefox/30.0 (Beta/Release)
Build ID: 20140711112313

Steps to reproduce:

Set minimal font size to 15px


Actual results:

Some page don't render correctly.

See attachements for informations


Expected results:

Goot rendering.

Comment 1

[Cédric Bellegarde]

Attachment: Firefox bad rendrering with minimal font size to 15px

As you see, author text isn't correctly rendered

Comment 2

[Cédric Bellegarde]

Attachment: Chromium good rendrering with minimal font size to 15px

With Chromium, it works.

Comment 3

[Cédric Bellegarde]

Attachment: Firefox good rendering with font-size: 1em !important

Here, no minimal font size in Firefox prefs.

To simulate it, i do this:
gnumdk@arch:~/.mozilla/firefox/wqmug9b3.default/chrome$ cat userContent.css 
* {
        font-size: 1em !important;
}

And it works, good rendering.

Comment 4

[Cédric Bellegarde]

Test site is:
http://www.omgubuntu.co.uk

Comment 5

[Boris Zbarsky [:bzbarsky]]

That text is inside an overflow:hidden div with 14px height specified and a 14px line height.

When you set a minimal font-size, that affects line heights as well (see bug 158868 for why), but not heights, of course.  So you end up with a 14px height and a 15px line height, and a 15px font size, leading to the observed rendering.

Chrome doesn't change the line-height when setting a minimal font size, which means it suffers from the problems of bug 158868 and its various duplicates.

I expect this is wontfix, since there's really no way to fix it without regressing bug 158868...  and if the page had used a 12px height to go with their 11px font you would have content cut off no matter what we did with line height; the real issue is the broken fixed height usage. :(

Comment 6

[Jonathan Kew [:jfkthame]]

I agree with comment 5. The example is an inflexibly-authored page, and simply doesn't cope well with the browser overriding the font size (e.g. by setting a large minimum size).

(Try setting Chrome's minimum font size to "huge" to see it fail badly there, too; the exact result is different, because as :bz says, Chrome handles minimum-font-size differently, but it's still a broken page.)

As a general rule, it's a bad idea for site authors to apply fixed dimensions to elements that contain text. This is a recipe for poor accessibility (think of readers with limited vision who need to set a very large font size, or just use a different default font that happens to have significantly larger letterforms than the author's).

This is either WONTFIX, or perhaps a case for Tech Evangelism to reach out to the site and suggest they adjust their CSS to be more accommodating.

Moving to product: Tech Evangelism.

Comment 7

[Karl Dubost💡 :karlcow]

There is no actionable item. There is no site with this specific error. Closing as INCOMPLETE.

Comment 8

[Jonathan Kew [:jfkthame]]

(In reply to Karl Dubost :karlcow from comment #7)
> There is no actionable item. There is no site with this specific error.
> Closing as INCOMPLETE.

What about the specific site mentioned in comment 4 (and shown in the attached screenshots)? AFAICS it still has this problem as described.

Comment 9

[Adam Stevenson [:adamopenweb]]

This appears to be fixed now, closing. Testing in FF 48/49 on OSX. Please let me know if you are able to reproduce the issue still.