Two big issues solved with one CSS rule

010101

Dear Core Developers,

Please strongly consider fixing this in beta 15, 16, or stable. At some point I submitted it to GitHub but it didn’t get traction.

It used to be that I thought the following CSS rule only fixed a rare issue on iPhones where if you scroll down quickly and then back up quickly the top nav bar disappears. It still fixes that. That is still an issue. But on top of that this fixes another issue that happens with the drawer menus that I just discovered. First I will show the fix, and after that is a GIF of the issue.

Fix (works up to Beta 14):

.App:before {
    transform: initial;
}

Here’s a GIF:

EDIT: Solved. For Beta 15+ the fix is here. Unless this is fixed before beta 15 is released. The best thing might be removing the transform rule for .App-navigation.

askvortsov

app:before isn't really a thing anymore starting with beta 15, so it's possible this might have been fixed as a side effect of that. I don't have an iPhone so there's not too much I can do, but could you test on nightly.flarum.site?

010101

askvortsov Uh oh, if it’s not a thing then now we have to figure out what new rule it is. There’s got to still be a transform rule that’s similar in beta 15 because the nightly does it too. And, now my above fix won’t work. EDIT: Wait, maybe my fix still works? Do the demos block custom CSS?

This GIF will first show the top nav disappearing. Then it will show the drawer issue.

Ralkage

010101 this happens to me ever so rarely on Chrome for iOS 😅

010101

I think, maybe, this is the culprit... the translate3d below. I can’t test it. And I don’t know how to override that in “less.”

But, I wonder why/how I landed on targeting App:before... which it sounds like may not work starting with beta 15. 🤔 Perplexing.

.header-background() {
  background: fade(@header-bg, 98%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: @zindex-header;
  border-bottom: 1px solid @control-bg;
  .translate3d(0, 0, 0);
  .transition(~"box-shadow 0.2s, -webkit-transform 0.2s");

  @media @phone {
    height: @header-height-phone;
  }
  @media @tablet-up {
    height: @header-height;
  }
}

010101

Ralkage If you’re a good user and you don’t try to scroll with a menu open it’s not an issue. But there’s so many bad users. 🙂

010101

Well, I give up. For now. Seems like it could still be a transform rule somewhere. Maybe transform is needed. Maybe it’s not. Or a transition rule? Or it could be 2020’s fault. I’m sad that once I update to beta 15, my fix may not work anymore. 😭

SychO

I'm an android user, so I can't reproduce the issue you're describing, but if you want to try your fix on beta.15+, apply the following CSS code

.App-header {
    transform: initial !important;
}

And let us know if it still fixes it.

Also if there are any issues in the frontend that are not already logged on github, it would be great to have them there as it'd be easier to track them that way.

010101

SychO I’ll try to sit down with a fresh dev install this weekend and troubleshoot with my iPhone. Which is a XR model which seems to matter due to it’s screen size. Although, I had this issue with the last model iPhone I had just before I got this XR.

I’ll add a fresh comment to the existing GitHub issue too:

flarum/core1959

I guess it makes sense now why a few styling issues have lingered for at least a couple years here. Because they can only be tested on an actual iPhone. And possibly only certain models.

010101

010101 Solved. Is this the permanent fix? Maybe not. Maybe transform needs to be completely removed or adjusted some other way. But, here’s a fix. It is now app-navigation that is the culprit.

.App-navigation {transform: initial;}

Here’s video evidence. I bought an iOS browser that comes with a dev console. Most/all free browsers for iOS don’t have that. It’s worth it though. It was only $6.99 and now I can troubleshoot small issues like this on the couch, or in bed on my phone. 😌 Anyway, this video will show me recreating the two jumping issues on my phone. Then it will show me editing the CSS, and then it shows me unable to reproduce the issue since transform:initial fixes it.

SychO

010101 Thank you for testing this out!

I'm pretty sure the transform rule is no longer needed, I believe the bug it initially fixed is no longer a bug in newer browsers since the time it was added in 2015.

010101

SychO I agree. The same transform rule may have been added in other spots throughout Flarum’s styles. But, it seems like this one which targets the navigation causes the most trouble. And it could be that any other transform rules throughout are needed/helpful. It’s just some iPhones don’t want it for the navigation. 😁