Email Input displaying incorrectly in Safari

by

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.

Safari

Chrome

<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;
}

108 thoughts on “Email Input displaying incorrectly in Safari”