Admonition bleeding out with extra pixels in Firefox

Contribution guidelines

• I’ve read the contribution guidelines and wholeheartedly agree

I’ve found a bug and checked that …

• … the problem doesn’t occur with the mkdocs or readthedocs themes
• … the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• … the documentation does not mention anything about my problem
• … there are no open or closed issues that are related to my problem

Description

There are some extra pixels on the border of admonition boxes on Firefox (98.0.2) Linux (Ubuntu 20.04LTS):

This does not happen with Google Chrome nor Chromium Linux:

Also, this seems to only affects Firefox on Linux, it does not occur on Windows (other OSes not tested).

Expected behaviour

There shouldn’t be any extra pixels:

Actual behaviour

There are extra pixels in the border of the title area:

Steps to reproduce

Use Firefox 98.0.2 on Ubuntu 20.04LTS and go to https://squidfunk.github.io/mkdocs-material/reference/admonitions/?h=admoni#supported-types

Package versions

• Python: 3.8.10
• MkDocs: 1.2.3
• Material: 8.2.5

Configuration

site_name: Material for MkDocs
site_url: https://squidfunk.github.io/mkdocs-material/

System information

• Operating system: Ubuntu 20.04LTS
• Browser: Firefox 98.0.2

[squidfunk]

I think I have a fix in c5a06c1d8. The problem comes from rounding errors and the negative margins we use to position the admonition title – Firefox seems to employ a different rounding method than other browsers, which leads to the admonition bleeding out. It doesn’t seem to happen in Chrome or Safari.

I added a browser hack that targets Firefox explicitly (I think the first browser-specific hack in the whole codebase), and adjusted the margin. My testing shows that it works. I’ve also checked right-to-left layouts, which also seem to work.

[facelessuser]

Bah… Thanks for the heads up 😃.