Composer scroll on iOS

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.

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.

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.

SychO

mekici If I knew of another way to fix it for safari that didn't make it worse it would have been done in core :/

askvortsov

mekici the main issue with IOS is that even non safari browsers are actually safari under the hood. Apple, being Apple, makes it an absolute PITA to develop and innovate, while refusing to follow standards that would lead to a better web. It's truly the new IE.

010101

mekici I use this now. Seems to work fine most of the time. And, the weird min-color-index stuff at the beginning is a hack so that this is only used by Safari. Which is nice because you don’t have to worry about it messing anything up in other browsers.

/* Composer iOS Safari Fix */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
@media @phone {
.Composer:not(.minimized) {
 bottom: 0 !important;
}}}}

My vote though is still to one day, make the composer full screen on mobile. You don’t really need to be able to see behind it. You can’t see much anyway. Not a lot of screen space on mobile. Then you can use the preview button if needed.

I tried to find other CSS hacks to make it full screen. I got really close. But then noticed some issue and gave up.