Unordered lists in Firefox about vertical-rhythm-reset

[jhildenbiddle]

Hi @ryanfeeley.

TL;DR: Can't be fixed AFAIK, but options exist to work around the issue.

From what I can tell, the issue is cause by Firefox's insistence on rendering list item bullets using the -moz-bullet-font instead of inheriting the font specified for the list item. Notice in the following screenshot that ::marker pseudo-element within the ordered list inherits the font-family value (sans-serif) of its parent <li> element:

Now, notice the font-family of the ::marker element within the unordered list:

Why is Firefox setting font-family to -moz-bullet-font instead of sans-serif? Who knows. The good news is that we can "fix" the spacing issue by forcing the ::marker element to inherit the font-family value:

ul ::-moz-list-bullet {
  font-family: inherit;
}

Unfortunately, this change causes Firefox to render the bullets at the wrong size and position:

Before:

After:

The font-size can be adjusted, but doing so reintroduces the height issue and new vertical alignment issues:

ul ::-moz-list-bullet {
  font-family: inherit;
  font-size: 1.5em;
}

No amount of tweaking to properties like line-height or vertical-align help, so "fixing" the font-family value isn't really a great solution unless you're okay with the relatively small bullets in Firefox.

Another possible solution is to manually render a bullet for ::-moz-list-bullet pseudo-elements using the content property:

ul ::-moz-list-bullet {
  content: '●  ';
}

Unfortunately, this isn't a fix I can bake into the project because it isn't easy to override without knowing what's happening under the hood and it doesn't work well with nested lists.

I think this is worth filing a bug with Mozilla. I will add more to this thread if/when I know more.

Happy to answer any additional questions you may have. Until then, I will close the issue since there is nothing for me to do.

Thanks!

[jhildenbiddle]

Firefox bug filed here: https://bugzilla.mozilla.org/show_bug.cgi?id=1750905