Email Input displaying incorrectly in Safari

Question

I am working on an app in NextJS. I have an email input field with a placeholder example@example.com. It displays correctly in Chrome but this weird thing happens in Safari browser. I have never run into this problem, any idea what might be causing this? Below you can see my HTML (JSX) code and CSS, as well as some screenshots.

<form>
   <input value={email} onChange={handleChange} placeholder="example@example.com" className="email-input"  type="email"></input>
</form>

.email-input {
    width: 80vw;
    height: 4.5vh;
    outline: none;
    border: 3px solid #8F8D89;
    border-radius: 5px;
    margin-bottom: 2vh;
    background-color: #EAE8DC;
    padding-left: 1vw;
    padding-right: 1vw;
}
  
.email-input:focus {
    border: 3px solid #E88074;
}
  
.email-input::placeholder {
    font-family: light-font;
    font-size: 3vh;
    color: #8F8D89;
    text-align: center;
}

Answer 1

Summary: Safari is not responsive to dynamic changes in placeholder text font-size.

Notice that the placeholder text styling from the question is defined here:

.email-input::placeholder {
    font-family: light-font; /* <- should add `sans-serif` here */
    font-size: 3vh;
}

with a font size set to 3% of the viewport height.

I tested this in Safari Technology Preview (Release 120), and it does display the placeholder text at the appropriate size upon page load:

However, when I reduced the height of the window, the placeholder text maintains its size:

The placeholder text resized correctly after a page reload:

Conclusion: Safari sets placeholder font-size correctly upon page load, but it is not responsive to dynamic changes viewport height.

CSS Styling Advice for Responsive Text

Using font-size: 3vh sets the size to a percentage of viewport height, and this has a problem: you can end up with very tiny, unreadable text:

To prevent tiny text, you can use the following alternative:

.email-input {
  font-size: calc(1em + 2vh);
}

The will ensure that the text is never displayed smaller than the font's minimum size:

Answer 2

Try this properties bro:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: green;
}