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.

Sign up for GitHub

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

Jump to bottom

Alignment inconsistency of markers in ordered lists in Safari #5398

Open
jon-kirwan opened this issue Oct 11, 2024 · 1 comment
Open

Alignment inconsistency of markers in ordered lists in Safari #5398

jon-kirwan opened this issue Oct 11, 2024 · 1 comment
Labels
awaiting triage Needs triaging by team 🐛 bug Something isn't working the way it should (including incorrect wording in documentation)

Comments

@jon-kirwan
Copy link

jon-kirwan commented Oct 11, 2024 •
edited
Loading

Description of the issue

Alignment inconsistency of markers in ordered lists in Safari: When viewed in Safari, ordered lists do not align properly with the surrounding content.

Update: it seems to be an issue with native ordered lists too, not only GOV.UK Frontend lists.

Steps to reproduce the issue

In Chrome, the list numbers align to the left, matching the positioning of surrounding content.

Screenshot displaying an ordered list alongside surrounding content in Chrome

However, in Safari, the alignment is slightly different.

Screenshot showing the issue in Safari

You can replicate this issue by creating a mockup of a Design System / GOV.UK Frontend page using the following markup and then comparing it in Safari and Chrome

<body class="govuk-!-padding-4">
  <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  <ol class="govuk-list govuk-list--number">
    <li>Lorem ipsum dolor</li>
    <li>Lorem ipsum dolor</li>
    <li>Lorem ipsum dolor</li>
  </ol>
</body>

Actual vs expected behaviour

I would expect the list markers to align properly with the surrounding content.

Environment (where applicable)

  • Operating system: macOS Sonoma 14.6.1 (23G93)
  • Browser: Chrome (latest) and Safari (latest)
  • Browser version: latest
  • GOV.UK Frontend Version: latest
@jon-kirwan jon-kirwan added 🐛 bug Something isn't working the way it should (including incorrect wording in documentation) awaiting triage Needs triaging by team labels Oct 11, 2024
@github-actions GitHub Actions
Copy link

Uh oh! @jon-kirwan, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
awaiting triage Needs triaging by team 🐛 bug Something isn't working the way it should (including incorrect wording in documentation)
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@jon-kirwan