Govuk-frontend: Safari browser choose file text not aligned correctly when page maximised

[moylesp]

Description of the issue

When viewing option to upload a file using the Choose File button, the associated text of no file selected does not align correctly.

Steps to reproduce the issue

open link in Safari browser https://design-system.service.gov.uk/components/file-upload/

Actual vs expected behaviour

I would expect that the text would align correctly. This does happen if you reduce the size of the browser window and can display correctly

Environment (where applicable)

I am testing on the Land Registry web site, but I have included a link to the file uploader example https://design-system.service.gov.uk/components/file-upload/

• Operating system: Mac Catalina
• Browser: Safari

• Browser version:
  

• GOV.UK Frontend Version:

[vanitabarrett]

Thanks for raising this @moylesp . I've had a look, and it looks like this is happening because the font-size of the file upload button isn't changing as it should do (and as it does in other browsers). On mobile, the button and the text are both 16px and therefore align correctly. However, on desktop they should both be 19px but in Safari this only applies to the text which pushes it out of alignment.

To me, this looks like a Safari bug as it doesn't seem possible to change the font-size of the file upload button. Strangely enough, this only seems to work if you also set the background color using ::-webkit-file-upload-button. I've raised an issue with Safari, so we'll have to see what comes back from that.