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

fix(macros/htmlattrdef): use inline-block for self-link #7129

Merged

Conversation

caugner
Copy link
Contributor

@caugner caugner commented Sep 12, 2022

Summary

Fixes #6427 by making the self-referencing anchor an inline-block.

Problem

We use a scroll-margin-top to make sure targeted anchors display below our sticky header, but Safari seems to ignore scroll-margin-top for inline elements (see here), so the targeted anchor ends up behind the sticky header.

Solution

Make the anchor an inline-block via a newly introduced utility class.


Screenshots

Before

image

After

image


How did you test this change?

Opened http://localhost:3000/en-US/docs/Web/HTML/Element/button#attr-autocomplete locally in Safari.

Otherwise Safari doesn't apply scroll-margin-top.
@github-actions github-actions bot added the macros tracking issues related to kumascript macros label Sep 12, 2022
Copy link
Collaborator

@queengooborg queengooborg left a comment

Choose a reason for hiding this comment

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

Confirmed it isn't causing any issues in Chrome or Firefox, LGTM!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
macros tracking issues related to kumascript macros
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Safari] Section anchors missing scroll offset
2 participants