bug: Input field cuts off descenders
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:
When zooming in the browser, this disappears depending on the zoom level.
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.
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
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 | |
| line height 3 |
Do you see this issue on other browsers as well?
On Firefox this does not happen for me.
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:
These are my font settings on Linux, I did not changes these. They are identical on Windows except Monospace uses Consolas there.
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.