search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.13k stars 319 forks source link

Radio circles are sometimes misaligned/not centred #5104

Open tom-clarke-dluhc opened 3 days ago

tom-clarke-dluhc commented 3 days ago

Description of the issue

When using the radio component the concentric circles for a selected option are sometimes not centred for specific browser/zoom percentages.

an example screenshot from the govuk frontend showing circles that don't share a centre when zoom is set to 90%

Steps to reproduce the issue

On the frontend example, while using Edge browser and a zoom of 90% the middle circle is quite a way from the middle. This can also be seen for 80% and some other common zoom percentages.

Actual vs expected behaviour

I would expect the circles to always be centred but they aren't for some zooms.

Environment (where applicable)

github-actions[bot] commented 3 days ago

Uh oh! @tom-clarke-dluhc, 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.

tom-clarke-dluhc commented 3 days ago

@kateriley1

querkmachine commented 2 days ago

This is caused by how browsers round fractional values to full pixels at certain zoom levels. There's a fuller explanation in the backlog issue here: https://github.com/alphagov/govuk-design-system-backlog/issues/59#issuecomment-1545549904

tom-clarke-dluhc commented 2 days ago

Thanks for the reply. Good to know that there's not much that can be done to resolve