kirby icon indicating copy to clipboard operation
kirby copied to clipboard

Text input elements clip descenders on Chrome, Windows

Open rasteiner opened this issue 2 years ago • 2 comments

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 [email protected] into the email box

Your setup

Kirby Version
3.7, but actually also prior versions.

Your system (please complete the following information)

  • Device: Desktop PC
  • OS: Windows 10/11
  • Browser: Chrome, Edge
  • Version: latest

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 avatar Jul 07 '22 08:07 rasteiner

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.

rasteiner avatar Jul 07 '22 08:07 rasteiner

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 🤷‍♂️

afbora avatar Aug 03 '22 13:08 afbora

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.

github-actions[bot] avatar Feb 06 '23 00:02 github-actions[bot]

image The problem is still there in current kirby

rasteiner avatar Feb 06 '23 13:02 rasteiner

@rasteiner can you also reproduce this in v4?

bastianallgeier avatar Sep 01 '23 12:09 bastianallgeier

Seems to be ok in v4 👍

image

rasteiner avatar Sep 01 '23 12:09 rasteiner

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.

bastianallgeier avatar Sep 01 '23 12:09 bastianallgeier