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 *

Your post must include a link to this post.

How does this work?
Write a response on your own website and include a link to this post. Then submit your response’s URL here. Your response may appear here after moderation. To update or remove it, edit or delete your original post and submit the same URL again. Learn more about Webmentions.