[Summary List] Bottom border of summary list items does not show in Safari

scottish-government-design-system / design-system

Design System for the Scottish Government and other Scottish public sector bodies

https://designsystem.gov.scot

MIT License

25 stars 11 forks source link

[Summary List] Bottom border of summary list items does not show in Safari #25

Closed lewisdorigo closed 9 months ago

lewisdorigo commented 1 year ago

The bottom border on each item is not visible in Safari from the medium breakpoint up.

Tested on:

Safari 16.2 on macOS
Safari 15.5 on iPadOS

From testing, it appears that the ::after pseudo element is being incorrectly positioned towards the bottom of the viewport while .ds_summary-list__item has display: table-row;.

This could be resolved by simply using border-bottom, rather than emulating a border using a pseudo-element.

See below screenshots: Screenshot 2023-01-13 at 7 50 31 am

Simulator Screen Shot - iPad Air (5th generation) - 2023-01-13 at 07 49 56

Screenshot 2023-01-13 at 7 52 57 am

jsutcliffe commented 9 months ago

This has been resolved with border-bottom.