Radio circles are sometimes misaligned/not centred

[tom-clarke-dluhc]

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.

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)

• Operating system: Windows 10
• Browser: Edge
• Browser version: 126
• GOV.UK Frontend Version: most recent

[github-actions[bot]]

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]

@kateriley1

[querkmachine]

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]

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

[romaricpascal]

I'm going to close this one as there is no action we can take to solve this and we have some documentation in our backlog.