如果字体为粗体和较小字体，为什么渐变背景在Firefox中不起作用

Question

我有一个div，它可以强制执行特定的字体大小和粗细，而内部的文本节点则使用渐变背景（许多小点）来突出显示

在firefox（66.0.3 Ubuntu）中，只有删除两个字体声明之一，背景才可见

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

常规字体： 粗体：

这是我完整的代码

.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;
}

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

https://codepen.io/anon/pen/mYyYOw