New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Admonition bleeding out with extra pixels in Firefox #3782
Comments
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. |
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. |
Just to add that Firefox on Windows 10 is also affected. Similar to macOS, a wide screen is required for this to trigger. |
@iBug Thanks. Could you please check if the fix resolves the issue? |
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 patchesVisit the Getting Started page at some browser zoom levels trigger the problem, specifically:
With patchI'm not an MkDocs theme developer so I don't know the "canonical" way to apply c5a06c1. Here's what I did instead:
ResultI could not observe any differences, after repeated ticking and unticking the newly added rule: |
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. |
@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 |
@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 the problem is not gone. If you look closely, the background will now bleed out, but it is barely noticeable. |
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 |
Bah... Thanks for the heads up :). |
Released as part of 8.2.9 |
Contribution guidelines
I've found a bug and checked that ...
mkdocs
orreadthedocs
themescustom_dir
,extra_javascript
andextra_css
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
Configuration
System information
The text was updated successfully, but these errors were encountered: