Composer modal moves around when typing in iOS Safari

[deebug]

Bug Report

Current Behavior
Composer modal moves up/down when typing. The modal either is in the correct position or in a more downward position. The shift happens seemingly random every few key-presses. When the header of the modal is somewhere near the top or middle it doesn't do the jig.

Steps to Reproduce

1. Go to https://nightly.flarum.site using iOS Safari (14.4.1)
2. Click on the compose message icon, top right.
3. Start typing.
4. Possibly repeat this process until the moving occurs. Often after 2 or 3 times.
5. See the modal moving when typing.

Expected Behavior
Consistent position of the modal.

Screenshots

video0.3.mp4

Environment

• Flarum version: dev-master
• Website URL: nightly
• Webserver: nginx
• Hosting environment: VPS
• PHP version: 8.0.2
• Browser: Safari 14 on iOS 14.4

Additional Context

This behavior is hard to reproduce in a consistent way.

[davwheat]

Is this the same as #2652? I have no iOS device, so can't test this, but a fix for that should have been implemented. Looks like we'll need to take another look after all :(

[deebug]

Comparing the two videos, it looks different but it could possibly be related.

[askvortsov1]

Is this the same as #2652? I have no iOS device, so can't test this, but a fix for that should have been implemented. Looks like we'll need to take another look after all :(

It is not. I'm only able to replicate this issue if I scroll ALL the way down on a long discussion, and use the reply button on the bottom. At this point, 2 things happen:

• The composer is opened about halfway down the page, not at the top as it should be
• When typing, the composer jerks violently around.

By console.logging window.scrollTop, I see that when the composer is opened while scrolled to the absolute bottom, window.scrollTop has a value of ~600px greater than it should. I haven't been able to find the source of this extra height (it's not the composer, I checked), so I think we have to chalk this up to Safari mobile being, well, Safari mobile.

See the commit description (a64c398) for more info on the fix.

Also, turns out this was present on https://beta.flarum.site too, which actually makes sense since the safari mobile edge case we have now is equivalent to what we had before.