Hey there!
I'm encountering a frustrating issue that's really boggling my mind. When using iOS 15 or 16 with Safari and the "Single tab" setting enabled (which places the Safari search bar at the top), I noticed a strange padding animation when focusing on my input field. Below is a simplified version of my code.
The tech stack I'm using:
- React
- SCSS
export const SearchBusinessPage = ({whatInputContent, onWhatChange}) => {
return (
<div className={classes({ inputContainer: true })}>
<input
autoComplete={'off'}
className={classes({
input: true
})}
type='text'
value={whatInputContent || ''}
onChange={e => onWhatChange(e?.currentTarget?.value || '')}
/>
</div>
);
}
And here is the accompanying CSS
.inputContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
background: linear-gradient(to top, #c6ffdd, #fbd786, #f7797d);
height: 100vh;
width: 100%;
}
.input {
flex: 1;
color: var(--grey-700);
font: var(--regular) var(--body-3);
&::placeholder {
color: var(--grey-500);
opacity: 1;
}
&:focus {
&::placeholder {
opacity: 0.5;
}
}
}
Looking at my code, nothing seems out of the ordinary. However, I can't seem to figure out how to stop the iOS behavior that adds unnecessary padding on input focus. I've tried multiple solutions but haven't had any luck so far. Any insights or suggestions?