iOS Safari scroll position jump

[dburles]

This one took a while to track down!

A combination of:

1. Viewport tag: <meta name="viewport" content="width=device-width, initial-scale=1">
2. Page content height being less than the viewport height

Results in the scroll position jumping position on each keypress within the textarea.

Reproduction app: https://github.com/dburles/react-autosize-textarea-issue

[FrancescoCioria]

Hi @dburles and thanks for detailed report!

I've cloned your repo and will try it on iOS soon.

Note that react-autosize-textarea uses autosize to grow the <textarea>, so it may be necessary a PR on their repo to fix your issue

[FrancescoCioria]

I've tried your app on an iPad and iPhone with iOSSafari 10, and on an iPad and iPhone8 with iOSSafari 11 but couldn't replicate the issue.

On which device are you experiencing the problem?

Results in the scroll position jumping position on each keypress within the textarea.

This means that every time you type, no matter the scrolling position in that moment, after you've typed the scroll position changes?

[dburles]

@FrancescoCioria I'm was on an iPhone 6s on iOS 11.

This means that every time you type, no matter the scrolling position in that moment, after you've typed the scroll position changes?

Actually, you have to be scrolled past the textarea. You should see the scroll position jump bringing it into focus. It's definitely not a behavior of Safari as removing onChange and value results in the expected behavior.

[dbertella]

Not sure if it's the same problem but this morning I found out there is an issue in ios 11 related to autosize. It's not going to be fixed, they said it's an ios bug and the solution is to exclude the autosize > For Autosize, I think the best thing to do is to exclude it for iOS users.
(not a very good solution)

You can reproduce the issue changing the content of the last textarea of the page with an iphone with ios 11 http://react-components.buildo.io/#textareaautosize

More info here:
jackmoore/autosize#343
jackmoore/autosize#352

I temporary switch to another library that seems to work better at least for me: https://github.com/andreypopp/react-textarea-autosize

[Zealur]

Hey, I've encountered same issue with this library on our project.
This is happening on Safari browser but you have to zoom-in/zoom-out in our case.
Most of the people are not even aware of their zoom level that's why you couldn't replicate it earlier.

[nfm]

We just ran into this too and can reproduce on Safari Version 15.0 (16612.1.29.41.4, 16612) under macOS 11.6.

I did have to zoom out in order to reproduce, at 100% zoom typing into the input didn't change the scroll position.