I have encountered a strange issue that I haven't been able to find any information about online. In my Angular 2 project, the font size of my bootstrap inputs is set to 1rem. However, after recompiling the project and loading the site for the first time, the font appears smaller than expected. Oddly enough, when I click anywhere on the page, the font in the inputs changes to the expected size.
Before clicking anywhere on the page, the form looks like this: before, and after clicking it looks like this: after. The difference is subtle but noticeable.
Here is the HTML code of the form group:
<div class="form-group" [formGroup]="loginForm">
// Input fields go here
</div>
The TypeScript code for handling the form is as follows:
// TypeScript code goes here
I have noticed that changing the input type from "password" to "text" resolves the font size issue, but the input must remain as type password. Modifying the input value during ngInit also results in the correct font size. It seems to be related to the angular form control, but I'm unsure how to address this problem.