Font descenders cut off in Safari buttons when line-height set to 1

Speaking of CSS, I’ve run into a CSS rendering issue and I’d like to know if I’m missing something, or if it’s a genuine bug.

In Safari version 13.0.2 (14608.2.40.1.2) as of October 31, 2019 (👻), if the line-height in a <button> tag is set to 1, then the descender of tech characters like j, g, or p get cut off. For example:

button { line-height: 1; }
Screenshot of a button with line-height of 1 in Safari from this Codepen example

Here’s a Codepen example you can try.

I can easily work around this by setting the line-height: normal; or to a larger value like 1.2, but I’d rather keep the tight line-height in this case.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Find out more about Webmentions.)