Disable auto scroll on Safari iOS16 and iOS 15 + single tab enabled

Question

Hy everyone.

I'm facing an issue that makes me lose my mind. On iOS 15 or 16, Safari, with the setting "Single tab" enabled (meaning you have the Safari searchbar on top), when I focus my input, a weird padding animation gets triggered. Here is my code, the most simplified possible.

The stack:

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

As you can see, nothing crazy in my code. But I can't get rid of that iOS behavior that, on input focus, wants to add a padding top or I don't know what. I tried many thing but couldn't find what can I do. Any idea around here ?

Answer 1

Well, if anyone has the same trouble, the solution I found was, actually, pretty straight forward. You can use this CSS pretty high in the DOM. The solution comes with unintended side effects, but it works anyway.

That blocks Safari UI from moving. So, no UI move, no problem 🤷

    height: 100%;
    max-height: 100%;
    min-height: 100%;
    width: 100%;
    position: absolute;
    overflow: scroll;