Why does the input box keep glitching on iOS but not on Android? - ios

Question

Does anyone know why the input box might be glitching only on iOS but works fine on Android? I have attached two videos for better explanation of this problem. Basically on iOS I would have to tap the input field twice for it to go into 'active' state and afterwards when I try type it zooms in so much into the screen to type. No issues like this in the browser as well.
iOS - https://streamable.com/e622tj
Android - https://streamable.com/4zvns6
<div
id='task-writer'
onClick={() => {
inputRef.current?.focus();
}}
>
<div className='left'>
<label>
<input
type='checkbox'
defaultChecked={checked}
onChange={() => setChecked(!checked)}
/>
<div className='checkbox-div' />
</label>
<form
className='NewTodoForm'
id='task-form'
onSubmit={handleSubmit}
ref={formRef}
>
<input
value={userInput.task}
onChange={handleChange}
id='task'
type='text'
name='task'
placeholder='Add your task here...'
autoComplete='off'
ref={inputRef}
// onFocus={() => {
// console.log('focused');
// setIsFocused(true);
// }}
// onBlur={() => {
// console.log('blurred');
// inputRef.current?.focus();
// setIsFocused(false);
// }}
/>
</form>
</div>
CSS Code:
#task-writer {
display: flex;
flex-direction: row;
width: 100%;
align-items: center;
padding: 10px;
padding-left: 20px;
padding-right: 15px;
border-radius: 20px;
background-color: #f5f7fa;
.left {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
align-items: center;
gap: 20px;
padding: 10px 0;
label {
display: grid;
place-items: center;
width: 30px;
height: 30px;
cursor: pointer;
input {
display: none;
}
form {
width: 100%;
height: 100%;
overflow: hidden;
transform: translateX(-50px);
transition: 0.25s ease;
transition-property: transform;
input {
width: 100%;
height: 100%;
border: none;
outline: none;
font-family: 'Inter var', sans-serif;
font-size: clamp(12px, 1.65vw, 16px);
font-weight: 400;
color: #000;
background-color: transparent;
}
}
}
right-calendar-date {
position: relative;
display: flex;
flex-direction: row;
height: 40px;
width: fit-content;
align-items: center;
gap: 12px;
padding: 0px 12px;
margin-left: 12px;
border-radius: 10px;
padding-right: 40px;
cursor: pointer;
color: #6d6d6d;
background-color: #EAEDEE;
opacity: 0;
pointer-events: none;
transition: 0.25s ease;
transition-property: opacity;
h4 {
overflow: hidden;
white-space: nowrap;
color: #000;
}
}
.date-form {
display: grid;
place-items: center;
height: 30px;
width: 80px;
padding: 0 16px;
border-radius: 10px;
opacity: 0;
cursor: pointer;
color: #6d6d6d;
background-color: #eaedee;
transition: 0.25s ease;
transition-property: background-color;
:hover {
background-color: #d9d9d9;
}
h4 {
font-size: clamp(12px, 1.65vw, 14px);
font-weight: 500;
}
}