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

Summary list borders sometimes don't render properly on Safari #5339

Open
Alex-Softwire opened this issue Sep 23, 2024 · 1 comment
Open

Summary list borders sometimes don't render properly on Safari #5339

Alex-Softwire opened this issue Sep 23, 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

@Alex-Softwire
Copy link

Description of the issue

Sometimes the grey borders between the rows of the govuk-summary-list component on Safari don't render in a straight line, and have discontinuities between the section under the key and the section under the value. This is usually 1px, but is often more. Sometimes the grey border renders twice on the same row. This can most easily be seen if you add a div of a fixed size within the value field, but it can even be spotted on the example on the gds page.

Screenshots

Here is the 1px discontinuity in the example from the gds summary list page:
image

Adding a div with a fixed height into the value field causes the border to duplicate below the address field.
image

Adding text above the div makes the border briefly double it's thickness below the address field and removes the duplication.
image

All of these examples look normal on Chrome and Firefox.

How to replicate

This seems to be a bug in Safari with the display: table css property in conjunction with the border-collapse: collapse, and the fact that we are using an odd px border. Interestingly, changing the border width to an even number fixes the problem. For reference, I can replicate this issue with a simplified version of the gov component here:

<head>
  <style>
    dl {
      display: table;
      border-collapse: collapse;
      width: 10%;
    }
    .box {
      height: 30px;
      padding: 10px;
      border: 1px solid black;
    }
    dt, dd {
      display: table-cell;
      padding: 10px;
    }
    .row {
      display: table-row;
      border-bottom: 1px solid gray;
    }
  </style>
</head>
<body>
  <dl class ="table">
    <div class="row">
      <dt>A</dt>
      <dd class ="cell">B</dd>
    </div>
    <div class="row">
      <dt>A</dt>
      <dd><div class="box"></div></dd>
    </div>
  </dl>
</body>

Which produces this on Safari:
image

And this on Chrome:
image

I have managed to replicate this on 3 out of 4 tested Macs, Safari versions 17.6 and 18.0, and on iOS.

Version

  • Operating system: macOS Sonoma 14.7
  • Browser: Safari
  • Browser version: 17.6 and 18.0
  • Frontend version: 5.6.0
@Alex-Softwire Alex-Softwire added awaiting triage Needs triaging by team 🐛 bug Something isn't working the way it should (including incorrect wording in documentation) labels Sep 23, 2024
@github-actions GitHub Actions
Copy link

Uh oh! @Alex-Softwire, 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
@Alex-Softwire