1551807 - gradient background doesn't work if the font is bold and smaller

Status: NEW

(Core :: Graphics, defect, P3)

Description

[Daniel Wolf]

Attachment: 1. bold font, missing dots 2. normal font, dots

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:66.0) Gecko/20100101 Firefox/66.0

Steps to reproduce:

I have a div that enforces a specific font size and weight and a text node inside that uses a gradient background (many small dots) for hightlighting

In firefox (66.0.3 Ubuntu) the background is only visible if I remove one of the two font declarations

font-size: 0.8em;
font-weight: bold;

Here is my complete code

<!-- language: lang-css -->

.title {
    /* these two influence the gradient background */
    font-size: 0.8em;
    font-weight: bold;
  
    background-color: lightgrey;
}

.title span {
    display: inline-block;
    width: 100%;
}

.highlighted-area {
    background: linear-gradient( 90deg, lightgrey 3px, transparent 1% ) center
              , linear-gradient(        lightgrey 3px, transparent 1% ) center
              , white;
    background-size: 4px 4px;
}

<!-- language: lang-html -->

<div class="title" style="width: 400px; height: 100px;">
    <span class="highlighted-area">Title</span>
</div>

See also
https://codepen.io/anon/pen/mYyYOw
https://stackoverflow.com/questions/56017836/why-doesnt-gradient-background-work-in-firefox-if-the-font-is-bold-and-smaller

Actual results:

The background is plain with the two font declarations and dotted (gradient) if one of them is removed

Expected results:

I expect the background to stay the same regardless of the font.
This could to be related to the OS (Ubuntu) because on StackOverflow a Windows user reports that it works fine.

Comment 1

[Alice0775 White]

Daniel, Can you please attach a results of about:support?

Comment 2

[Daniel Wolf]

Attachment: about:support as asked

Comment 3

[Alice0775 White]

I can reproduce on Nightly68.0a1 Windows10 if HWA is disabled (i.e, "Basic" Compositor)

Comment 4

[Nicolas Silva [:nical]]

Also reproduces with WebRender. Matt do you think this is happening at the level of displaylist or CSS handling?

Comment 5

[Matt Woodrow (:mattwoodrow)]

I can't reproduce this on OSX (accelerated, Basic or WR), so it seems platform specific in some way. That makes it sound like a graphics issue, as we shouldn't have much in the way of platform specific code in displaylist, or css parsing.

Comment 6

[Jonathan Kew [:jfkthame]]

Although I don't see the dots disappear on OS X, I do see some unexpected variation: if I change the font size by small increments (e.g. 0.1em at a time), sometimes the dots on the background, which are usually square, will become "squashed" such that they're only a single pixel high instead of their usual two pixels. This is easier to see with the screen magnified, although the difference is visible even unmagnified if you watch closely.

So I suspect the reporter's issue is essentially the same: at certain sizes, the dots get squashed vertically, and in his case they're getting squashed down to nothingness.