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

18 thoughts on “Email Input displaying incorrectly in Safari”

  2. 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:

    enter image description here

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

    enter image description here

    The placeholder text resized correctly after a page reload:

    enter image description here

    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:

    enter image description here

    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:

    enter image description here

    Reply

Leave a Comment