open-ui icon indicating copy to clipboard operation
open-ui copied to clipboard

Bug: Textarea font sizing seems incorrect with other form elements

Open xjdesigns opened this issue 4 years ago • 4 comments

With the new update to UI controls I am seeing an issue with text area. I have my own UI library I use and handle setting the font size for form controls. When setting a font size for inputs and textarea elements the size is being incorrectly calculated. Upon inspecting the computed values show the same cascade but produce different results. It appears to be some issue with the font family. When setting the font family to monospace which is default the size is affected.

Reproduce: Visit bootstrap page. Inspect the text area in devtools. https://getbootstrap.com/docs/4.5/components/forms/ Toggle the font-family inherit on an off inside the _reboot.scss file and you will notice the computed size changes.

Issue: Setting input and text area to ".75rem" value produces different calculated values. Before the update to the new form controls this was not an issue.

Input element font size declaration produces a computed value based off the root size. .75rem = 12px

Textarea element font size declaration produces a computed value based off the UA agent stying. .75rem = 9.75px

xjdesigns avatar Jun 10 '20 12:06 xjdesigns

With the new update to UI controls I am seeing an issue with text area. I have my own UI library I use and handle setting the font size for form controls.

Thanks for filing the bug @xjdesigns - to clarify are you referring to the change to the Chromium based controls? Haven't had a chance to look at your issue yet but does this issue repro in Firefox/Safari assuming you are referring to the Chromium changes?

gregwhitworth avatar Jun 11 '20 03:06 gregwhitworth

@gregwhitworth Sorry for the delay. Yes correct. When the new update rolled out with the new controls I noticed the issue. This issue is Chromium only. When inspecting with Safari and Firefox the issue is not present. I will verify on new edge with uses Chromium. I am not able to validate with and older version of Chromium which did not have the issue but I think this would have been caught as well.

I have broke it down to the font family. I did implement a workaround for now by setting it to inherit but it was not needed previously.

Let me know if I can help.

xjdesigns avatar Jun 15 '20 01:06 xjdesigns

I checked new Edge which uses Chromium and the latest has the same issue. From my understanding new Edge would have Open UI. Please correct me if I am wrong.

xjdesigns avatar Jun 15 '20 01:06 xjdesigns

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

github-actions[bot] avatar Mar 20 '22 00:03 github-actions[bot]