Descenders clipped from letters such as qyp when select boxes are in an error state

[andymantell]

When a select field is rendered in an error state, descenders are clipped. This is due to the 4px red border effectively reducing the height of the content area of the select box by 8px when it is present since the select element has box-sizing: border-box set.

See https://lackadaisical-captain.glitch.me for a live demo, or screenshot below:

[36degrees]

Hi Andy,

Thanks for flagging this – can you confirm which browser(s) you're seeing this behaviour in? It looks OK in Chrome 76 on macOS.

[andymantell]

The screenshot above is from Chrome/Ubuntu, but the bug is also present in:

Chrome/Win7
IE11/Win7
Firefox/Win7
Chrome/Win10
Firefox/MacOS

The above list is not exhaustive, I just stopped testing at that point. I've checked Chrome/MacOS and Safari/MacOS and can confirm that the bug is not present there.

[36degrees]

@andymantell do you happen to know what font is being used on Ubuntu?

I can't reproduce this (at least not to anywhere near the same extent) when using Transport or Arial – it seems to be a much bigger problem using the 'system' font stack that's used by the Glitch app (Segoe UI on Windows, as far as I can tell)

Chrome 76/Win7, using Arial (overridden with inspector):

Chrome 76/Win7, using Transport (example from our review app):

[andymantell]

It's rendering in Roboto for me. I see what you mean though - when I disable the custom stack that's in use on Glitch the problem disappears.

We originally found this on one of our internal services we've developing. That would have been rendering in Arial when the testers found it. I'll see if I can get them to post a screenshot on here of the original problem.

[andymantell]

At least, I think it would be Arial. Their font stack is set to $govuk-font-family: 'Arial', sans-serif; and I'm pretty sure Arial would be there.

[36degrees]

That's strange – as I mentioned above if I force Arial using the inspector I'm not seeing it. Do you know what browser/OS combination it was originally observed on by the testers?

[andymantell]

I have had a reply from the service team who originally reported this and they apparently can no longer reproduce it. I wonder if their service had somehow ended up being rendered with a different fallback font which seems to trigger this bug.

I think for now we can safely close this. Sorry for the seemingly false report!

[hannalaakso]

No worries @andymantell. Thanks for following up on it 👍