Composer scroll on iOS

Arnold

Hey, guys, here's a small but quite annoying bug in iOS.

When you start typing a reply on the iPhone or iPad, the preview of your post starts to fill up and the composer simultaneously goes up line by line, hiding behind the upper border of the screen. As a result, you don't see the lines that you wrote earlier. Here's a video:

I recorded it in Firefox responsive design mode but you can easily replicate it on (almost) any iOS device working at least on iOS 13 and 14.

Maybe it can be easily fixed with some CSS, but so far I couldn't find any solution.

010101

It depends on the iPhone model because it has to do with screen size. My iPhone (XR) doesn’t have your issue. But, it does have this issue after tapping Reply:

You could test out this:

@media (max-width: 767px) {
.Composer {
    bottom: 0 !important;
}
}

Never mind. I see in a previous post you said this doesn’t work anymore.

Arnold

010101 yep, it's correct, on some iPhones one bug replaces the other 😅 As I understand, bug with the composer hiding under the screen/keyboard appears on bigger screens.

SychO can you please share the temporary solution if it's some CSS code or something we can apply in the Flarum code by ourselves? On my forum about 30% of users are using iPhones, so I really want to improve their experience with Flarum which is unfortunately not that good so far.

010101

Core dev team if you see this... at some point posting on mobile has to be re-designed. As you can see above, putting any current CSS issues aside, with a smartphone's keyboard visible you have very little space. The composer box needs to be full screen and fixed on mobile with a preview tab. Especially for us darn iPhone fans. 😬 I guess it would have to auto adjust depending on where the user's keyboard is?

SychO

010101 There's a pull request that improves the experience by fixing the composer to the top on mobile, but it's not a priority right now, so I can't tell when we'll get around to it.

I don't know about full screen on mobile, it seems to not be an option, and I haven't yet checked to see why.

SychO

Arnold This is the relevant pull request: flarum/core2279

Do let us know of the results if you test! that would be very helpful.

010101

SychO This is a better fix IMO. Good old "initial" strikes again. Meaning, the solution is to probably remove an old "fix". This ensures the composer is at the bottom, similar to how it is on desktop. It makes the most sense. Composer box adjacent to your keyboard. "But, we want people to be able to scroll and see behind it," some say. 1) You can still scroll and see other posts. 2) After typing enough content you start to see your new post behind the post box without scrolling. 3) There is the eyeball 👁 preview button. People should use that to see their post before posting. Does this fix og poster's issue? I don’t know because that was never an issue on my iPhone. But, it might.


@media (max-width: 767px) {
    .Composer:not(.minimized) {
      top: initial !important;
      bottom: 0 !important;
        
    }
}

Looks like this:

Arnold

SychO it seems that position: fixed; doesn't work anymore. But @010101's solution

@media (max-width: 767px) {
    .Composer:not(.minimized) {
        bottom: 0 !important;
    }
}

works in the cases when composer falls below the screen. It doesn't help in case of composer scrolls up during typing though.

010101 This is a better fix IMO

It definitely works but I don't know if sticking composer to screen keyboard is a universal solution 🤔

SychO

010101 Thank you, I replied in the relevant pull request.

010101

Arnold The pull request @SychO mentions includes JavaScript changes which make it work. The CSS change mentioned in the pull request by itself won’t work. I missed that too. So, you'll have to test the full pull request or wait for it to be merged.

I like the composer attached to the bottom of the screen. It matches how it is attached to the bottom on desktop. I like matching. 😁

Arnold

010101 includes JavaScript changes

Oops, you are right, I totally missed that 😅 Ok, I'll try again.

SychO

Arnold My bad, I had forgotten there were JS changes since it's been a long while I posted that PR

Arnold

SychO hmm, I don't know if I'm doing it right, but after applying those changes to Composer.js and Composer.less the composer is off screen now. I can type and see what I'm typing in post preview but I can't see the composer 😅

SychO

Arnold JS changes require recompiling the code, now that I look at the PR you could on your side avoid any js changes and just add the following CSS from admin appearance settings

@media (max-width: 767px) {
    .Composer:not(.minimized) {
        position: fixed;
        top: 0 !important;
    }
}

010101

SychO Confirming this works for those of us who don’t feel like testing the JS right now. Thanks so much!

Arnold

SychO works great on most iPhone models, thanks a lot! 👍️

mekici

SychO These codes didn't work for me. Flarum version V1.0.4

SychO

010101 Awesome! Thanks a lot for testing this 😄

SychO

mekici You don't need to implement it yourself, it was implemented in 1.0.0 for Android. It wasn't implemented for iOS because Safari bugs with it.

mekici

SychO Can you provide any css for IOS that will fix this issue? It doesn't matter if it's corrupted in Safari. I just need it to work properly on IOS.