daisyui icon indicating copy to clipboard operation
daisyui copied to clipboard

bug: Input field cuts off descenders

Open Fabus1184 opened this issue 7 months ago โ€ข 3 comments

Reproduction URL (Required)

https://daisyui.com/components/fieldset/

What version of daisyUI are you using?

v5.0.35

Which browsers are you seeing the problem on?

Chrome

Describe your issue

The default input field slightly cuts off descenders of some characters: Image

When zooming in the browser, this disappears depending on the zoom level.

Fabus1184 avatar May 15 '25 16:05 Fabus1184

Thank you @Fabus1184 for reporting issues. It helps daisyUI a lot ๐Ÿ’š
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

github-actions[bot] avatar May 15 '25 16:05 github-actions[bot]

I have tested this with multiple browser (chrome, safar, and firefox), different zoom levels (33% to %400) with these letters: gjpqy

and the cutting is not appearing

sulimanbenhalim avatar May 16 '25 11:05 sulimanbenhalim

Then it is a browser issue?

Also I noticed if you set a taller line-height it is displayed correctly:

line height default, or 1 or 2 Image
line height 3 Image

Fabus1184 avatar May 16 '25 16:05 Fabus1184

Do you see this issue on other browsers as well?

saadeghi avatar Jul 06 '25 02:07 saadeghi

On Firefox this does not happen for me.

Fabus1184 avatar Jul 06 '25 02:07 Fabus1184

I think I know why this occurs:

the computed font-family properties on the field is

var(--default-font-family, ui-sans-serif, system-ui, sans-serif,
 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");

On Windows (for me) the actual font used to render this field is Segoe UI, on Linux (for me) it somehow is Cantarell. The cutting off only happens with Cantarell. Manually setting Segoe UI works.

I have no clue why Cantarell is used, I did not change any font settings, the font settings on Windows and Linux in the browser are basically identical (Times New Roman & Arial).

Both images on Linux: Image

Image

These are my font settings on Linux, I did not changes these. They are identical on Windows except Monospace uses Consolas there.

Image

Fabus1184 avatar Jul 06 '25 03:07 Fabus1184

I think this can be closed. There are lots of badly designed fonts out there, and each must be tweaked to compensate for their specific faults. Maybe in this case https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-size-adjust would help.

pdanpdan avatar Nov 05 '25 09:11 pdanpdan