1

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 ?

Gif that show my bug

Nuguns
  • 31
  • 8

1 Answers1

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;
Nuguns
  • 31
  • 8