Skip to content
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

Closed
5 tasks done
jmaneyrol69 opened this issue Mar 30, 2022 · 14 comments
Closed
5 tasks done

Admonition bleeding out with extra pixels in Firefox #3782

jmaneyrol69 opened this issue Mar 30, 2022 · 14 comments

Comments

@jmaneyrol69
Copy link

@jmaneyrol69 jmaneyrol69 commented Mar 30, 2022

Contribution guidelines

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):

Firefox-mkdocs-boxes

This does not happen with Google Chrome nor Chromium Linux:

Chrome-mkdocs-boxes

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:
Chrome-mkdocs-boxes

Actual behaviour

There are extra pixels in the border of the title area:
Firefox-mkdocs-boxes

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
Copy link
Owner

@squidfunk squidfunk commented Mar 30, 2022

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:

Bildschirmfoto 2022-03-30 um 11 40 40

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

@squidfunk squidfunk added the bug label Mar 30, 2022
@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Mar 30, 2022

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.

@squidfunk squidfunk changed the title Admonition border extra-pixels with Firefox (Ubuntu) Admonition bleeding out with extra pixels in Firefox Mar 30, 2022
@iBug
Copy link
Contributor

@iBug iBug commented Apr 2, 2022

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

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Apr 2, 2022

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

@iBug
Copy link
Contributor

@iBug iBug commented Apr 3, 2022

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:

    image

    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":

    image

    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:

image

@iBug
Copy link
Contributor

@iBug iBug commented Apr 3, 2022

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

image

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Apr 4, 2022

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
Copy link
Owner

@squidfunk squidfunk commented Apr 4, 2022

@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
Copy link
Contributor

@iBug iBug commented Apr 4, 2022

@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.

image image

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

@iBug
Copy link
Contributor

@iBug iBug commented Apr 4, 2022

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:

image image

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Apr 4, 2022

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

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Apr 4, 2022

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
Copy link
Contributor

@facelessuser facelessuser commented Apr 4, 2022

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

@squidfunk
Copy link
Owner

@squidfunk squidfunk commented Apr 8, 2022

Released as part of 8.2.9

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants