search

getkirby / kirby

Kirby's core application folder
https://getkirby.com
Other
1.29k stars 168 forks source link

Text input elements clip descenders on Chrome, Windows #4484

Closed rasteiner closed 1 year ago

rasteiner commented 2 years ago

Description

The tail of some descenders are clipped by the text inputs (all of them: text, email, etc.)

Expected behavior
Don't cut tail. Poor tail. Bad box!

Screenshots
Kirby 3.7

image

Kirby 3.6

image

To reproduce

  1. Buy a Windows machine and a 4k screen
  2. Open Edge or install and open Chrome
  3. Go to https://getkirby.com/try and click on "Start Demo"
  4. Click on "Open the panel"
  5. Insert ggg@jjj.com into the email box

Your setup

Kirby Version
3.7, but actually also prior versions.

Your system (please complete the following information)

Additional context
Firefox on the same machine, rendering the same font (Segoe UI) does not have this problem. Chrome on Android does not have the problem (not rendering Segoe UI, though).

I have no idea why I didn't notice this before. Maybe because none of the names I normally write have descenders.

rasteiner commented 2 years ago

OH!

this also only seems to happen on 4k screens with Windows set to 150% magnification. At 100% or 200% it doesn't clip the text. I guess it's a subpixel rounding problem.

150% is the windows default for 4k screens though.

afbora commented 2 years ago

The input line height of 1.25rem doesn't seem sufficient for the font used in the panel. Two solutions I can think of: font or increasing line-height of inputs. I don't know if there is a more stable solution 🤷‍♂️

github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. This is for us to prioritize issues that are still relevant to our community. It will be closed if no further activity occurs within the next 14 days. If this issue is still relevant to you, please leave a comment.

rasteiner commented 1 year ago
image

The problem is still there in current kirby

bastianallgeier commented 1 year ago

@rasteiner can you also reproduce this in v4?

rasteiner commented 1 year ago

Seems to be ok in v4 👍

image
bastianallgeier commented 1 year ago

I will close this issue. For v3, there are more important issues to fix and with v4 it will then be fixed anyway. This is great. Thanks for testing again.