Skip to content

Work around annotation icon rotation bug on Firefox#5937

Merged
squidfunk merged 2 commits intosquidfunk:masterfrom
sisp:fix/annotation-rotation-firefox-bug
Sep 2, 2023
Merged

Work around annotation icon rotation bug on Firefox#5937
squidfunk merged 2 commits intosquidfunk:masterfrom
sisp:fix/annotation-rotation-firefox-bug

Conversation

@sisp
Copy link
Copy Markdown
Contributor

@sisp sisp commented Aug 31, 2023

I've added a workaround for a Firefox bug that renders a subpixel outline when rotating a mask image element – in this case the annotation icon:

image

Copy link
Copy Markdown
Owner

@squidfunk squidfunk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR! Just a minor question ☺️

// Hack: Work around Firefox bug that renders a subpixel outline when
// rotating a mask image element.
// https://bugzilla.mozilla.org/show_bug.cgi?id=1671784
overflow: hidden; // stylelint-disable-line
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why does stylelint need to be disabled here?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because it complains otherwise:

Expected "overflow" to come before "outline"  order/properties-order

And I thought it's good to keep this hack separate from other styles, starting with a comment, to remember later that this is a hack and to ease its removal at some point when Firefox has fixed the bug and enough time has passed to justify dropping support for an old buggy Firefox version.

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should move it into the right location and keep the comment above the property, exactly as we do it with other hacks we have in place, e.g.:

height: 100%;
overflow-x: hidden;
// Hack: normally, we would set the base `font-size` to `62.5%`, so we can
// base all calculations on `10px`, but Chromium and Chrome define a minimal
// `font-size` of `12px` if the system language is set to Chinese. For this
// reason we just double the `font-size` and set it to `20px`.
//
// See https://github.com/squidfunk/mkdocs-material/issues/911
font-size: 125%;

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see. But then the two relevant styles are not collocated, so the comment needs to be duplicated. Is this how you would like it?

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Valid point. Then please only disable the specific rule with stylelint, not the entirety of stylelint, as we'd be losing linting of other errors otherwise.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea. I've pushed an update as you suggested.

@sisp sisp force-pushed the fix/annotation-rotation-firefox-bug branch from 3efe96c to b82006d Compare September 1, 2023 07:19
@sisp sisp force-pushed the fix/annotation-rotation-firefox-bug branch from b82006d to ec1615d Compare September 1, 2023 11:37
@squidfunk squidfunk merged commit ec709b4 into squidfunk:master Sep 2, 2023
@squidfunk
Copy link
Copy Markdown
Owner

Thanks!

@sisp sisp deleted the fix/annotation-rotation-firefox-bug branch November 1, 2023 08:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants