Admonition bleeding out with extra pixels in Firefox

[jmaneyrol69]

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]

Thanks for reporting. I can reproduce this behavior on the latest macOS Firefox as well if the viewport is wider than 1600px. It seems to be related to rounding errors and applies to admonitions as well as details. If you remove the border, on the left, the titles are still wider than the container, which can be seen if we give the background another color:

I'm unsure if this is fixable. I'll look into it when I find some time.

[squidfunk]

I think I have a fix in c5a06c1. 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.

[iBug]

Just to add that Firefox on Windows 10 is also affected. Similar to macOS, a wide screen is required for this to trigger.

[squidfunk]

@iBug Thanks. Could you please check if the fix resolves the issue?

[iBug]

I'm afraid it's going wrong on the other side.

I'm using Firefox 97.0.1 on Windows 10 21H2, with monitor size 2560×1440 and system zoom at 100%. My dev tools open to the right (as the default on Chrome and Edge).

Without patches

Visit the Getting Started page at some browser zoom levels trigger the problem, specifically:

• Any viewport width looks fine on 100% zoom.

• With 100vw = 1800px, page zoom 40% 60%, 110%, 120%, 220% trigger the "left bleed-out" effect:

  

  Note that 120% page zoom seems to be an easily reproducible setup.

• With certain setup, e.g. 120% zoom at 100vw = 1970px (Firefox shows 1642px after zooming in), there's a "right bleed-out effect":

  

  Again this is somewhat easy to trigger on 120% zoom. Just drag your dev tools to change viewport width.

With patch

I'm not an MkDocs theme developer so I don't know the "canonical" way to apply c5a06c1. Here's what I did instead:

• Read the code: It effectively adds one CSS rule for Firefox:

   margin-inline-start: px2rem(-15.5px);

• Find out the value for 1rem. In my case it's 20px.

• Do the calculation of px2rem manually. I got -.775rem.

• Locate any .md-typeset :is(.admonition-title, summary) entry in dev tools, insert this rule:

   margin-inline-start: -.775rem;

  Make sure the new rule is not slashed out.

Result

I could not observe any differences, after repeated ticking and unticking the newly added rule:

[iBug]

Pretty sure the reason it doesn't work is that the new patch changed effectively nothing. This is already -0.775rem (not manually added):

[squidfunk]

Okay. Thanks for testing. My testing showed that everything worked, but I guess it may also be impacted by the resolution of the monitor, as well as display width. I'm not sure this can be fixed then, because the rounding errors will always manifest to some degree in certain situations. As a mitigation, we could remove the border so that the issue is not as perceptible as it currently is, but the issue at hand won't fix.

[squidfunk]

@iBug only to be sure, could you please check the admonition reference? It has the patch applied – only to rule out that you missed a step when testing the patch manually:

https://squidfunk.github.io/mkdocs-material/reference/admonitions/#usage

[iBug]

@squidfunk I'm afraid no, again. Both screenshots are taken at 100% system zoom and 110% page zoom (browser zoom) on my 2560×1440 monitor at different viewport widths.

My Firefox auto-updated to 98.0.2 after yesterday's testing but I believe it makes no difference.

[iBug]

HOWEVER I found the problem gone after removing (unchecking the checkbox in F12 Dev Tools) both instances of this rule:

.md-typeset :is(.admonition-title, summary) {
  border: 0 solid #448aff;
}

Except that the admonition title goes a bit to the left:

[squidfunk]

@iBug the problem is not gone. If you look closely, the background will now bleed out, but it is barely noticeable.

[squidfunk]

Fixed in 0f7e9fa. I've removed the border and adjusted the positioning so that it looks identical to the current solution.

@facelessuser IIRC, this is likely going to break your customizations, as it basically reverts 8eb2375, after which you had to adjust your styles. The reason why the title is moved all up to the left and does not stop at the border is because if we start at the border, the focus outline looks weird on details elements. Since I do not want to maintain different styles for admonitions and details, I normalized it. With the current change, the outline is preserved.

[facelessuser]

Bah... Thanks for the heads up :).

[squidfunk]

Released as part of 8.2.9