Footer jumps on hover in Safari

[tblacker7]

Bug Report

What is the issue?

Using Safari, if you hover over one of the footer links it jumps around. It makes certain links impossible to click.

What steps are required to reproduce the issue?

To see this in action, using Safari web browser (I am on Mac, have witnessed it also happening on Safari for windows), visit www.nhs.uk. Scroll to bottom of the page. Hover over accessibility (ironically). As you hover, it jumps away from the mouse, making it unclickable.

Is there anything else you think would be useful in recreating the issue?

There is a workaround. Its a little nasty. before the closing <ul> for class nhsuk-footer__list nhsuk-footer__list--three-columns, after the final<li> add <div style="height: 10px; width: 100%;"></div> This appears to force Safari to finish allocation of links to columns.

[chrimesdev]

Hi @tblacker7, thanks for opening this issue. I have managed to reproduce this on the NHS website, however the website isn't currently using the latest version of NHS.UK frontend. We're currently in the process of updating the version on the website.

Do you have the same issue on the NHS.UK Frontend - Footer with columns example?

[tblacker7]

it doesnt show on the footer example in the library. However, it does show on deployed sites using the updated library. 🤔

[chrimesdev]

That's no good is it - I'll mark this up to be looked at. It will be most likely in the New Year now.

Is a fix something you could attempt Tony? We're always open to new contributors!

[tblacker7]

the empty div resolves it, but it just feels plain wrong to add a div inside a ul tag...

[Fenwick17]

This seems to be an issue with column-count. The intial problem is that when no hover state is applied the 8 links we have are in a 3 2 3 format, which is not expected behaviour. So the hover state is correct, but by default is should be the 3 3 2 you see when hovering.
@AdamChrimes What is the design reasoning behind this layout? Just thinking as column-count isn't supported by every browser (IE things) and Gov as an example just leave theres in a self wrapping one row system.

Going with that route I think would give a more logical looking tab order too.

[davidhunter08]

The initial and only reasoning was to make it look a bit tidier but I see no problem in going with the self wrapping one row system.