Focused link clipped in Chrome – Footer component, two column list layout

[danacotoran]

This issue seems to occur only when one of the columns has more navigation items than the other column (it's fine when the columns are equal).

What happens is that for some reason when the last link on the larger column is in focus, the link gets clipped.

It seems to have something to do with how Chrome applies the columns CSS properties.

Normal

With two unequal columns

[36degrees]

Looking at https://stackoverflow.com/questions/17881923/box-shadow-trimmed-in-css-columns-in-chrome, transform: translateZ(0); seems like it might fix this.

(Think this is at least vaguely related to #1284, so in the longer term we might end up moving away from using CSS columns anyway)

[vanitabarrett]

As mentioned in v4.0.0 prioritisation, we're going to do a timeboxed investigation into #1726 and #1539 first. It's possible that this issue might be fixed if we switch to a different layout system in the footer. We should make sure we keep this card in mind when doing any testing during that investigation.

[matthillco]

I've recently completed a small PR that may contain a fix for this, see here for further info: frontend/3253

[36degrees]

I think the issue might have been fixed in Chrome 102.

Are we happy to close this on that basis?

Chrome 101

Chrome 102

[vanitabarrett]

Happy to close if this has been fixed @36degrees

[36degrees]

@matthillco meant to say – thank you very much for pointing us towards your fix, really appreciate it. However it looks like the issue has been fixed as of Chrome 102 so it shouldn't be needed now 🤞🏻