weixin_39563132
weixin_39563132
2021-01-12 13:02

Scroll to top and menu disappears

Bug Report

Current Behavior On my mobile device when scrolling to the top quickly, sometimes the menu disappears. This happens at the Flarum discuss forum and a forum I have installed as well. Here is a screenshot. The arrow is pointing to a sliver of the new post icon that you can still see. This is to show that the menu text/icons scroll out of view or perhaps don’t get painted back in the right spot in time.

AF2-D8827-C5-BE-4-FA7-B480-41007-D30-D0-BE

Steps to Reproduce 1. Ideally use an iPhone and the Chrome iOS browser 2. Scroll down 3. Quickly swipe up to the top 4. Repeat several times until the menu disappears

Expected Behavior Menu text/icons should not suddenly disappear even if it is rare.

Environment - Flarum version: Beta 11.1 - Website URL: https://discuss.flarum.org - Webserver: ? - Hosting environment: ? - PHP version: ? - Browser: For sure iOS Chrome. Could be other mobile browsers.

Possible Solution This fixed it at my forum and I have not seen any new issues created by doing this. I cancelled out this CSS rule:

transform: translate3d(0,0,0)

Which I believe is located here: https://github.com/flarum/core/blob/master/less/common/mixins/header-background.less

Why does this fix it? I don’t know for sure but I’ve read that many people add this transform rule to fix paint issues (issues similar to this one where elements are disappearing). However, instead of being the fix, it seems this rule is causing the issue.

Is this one rule necessary especially if it is periodically making the main nav bar disappear on certain devices?

该提问来源于开源项目:flarum/core

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

13条回答

  • weixin_39613712 weixin_39613712 3月前

    I think it was something to do with Chrome and transparency. Confirmed on digging: https://github.com/flarum/core/blob/3925e5892c7e9fe9671f99c84cdafe56e4a83480/less/lib/layout.less#L25 Might not be necessary anymore.

    点赞 评论 复制链接分享
  • weixin_39563132 weixin_39563132 3月前

    Confirming this is still an issue even going into beta 15. But, on top of the top nav bar disappearing, there is also an issue with the tag selector drawer menu on mobile. For my beta 14 installations, for reasons I personally do not fully understand, the following fixes both issues.

    .App:before { transform: initial; }

    For beta 15 and higher, maybe (not tested yet) the following could work:

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

    See this thread for video of the issue:

    https://discuss.flarum.org/d/25669-two-big-issues-solved-with-one-css-rule

    点赞 评论 复制链接分享
  • weixin_39563132 weixin_39563132 3月前

    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. 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.

    https://vimeo.com/492702913

    点赞 评论 复制链接分享
  • weixin_39788131 weixin_39788131 3月前

    Thank you for testing !

    I did some digging and I believe the bug that the transform rule tries to fix which was added nearly 5years ago, has been long fixed in newer browsers.

    I think it's safe to remove it now.

    Two spots where we we need to remove it:

    https://github.com/flarum/core/blob/859f0145396082558e00138214e572dd5d7d3ba5/less/common/mixins/header-background.less#L9

    https://github.com/flarum/core/blob/859f0145396082558e00138214e572dd5d7d3ba5/less/forum/Composer.less#L222

    点赞 评论 复制链接分享
  • weixin_39685697 weixin_39685697 3月前

    Has anybody else seen this problem, and - most importantly - on other OS / browser combinations?

    I confirm this issue, noticed it today and searched for a bug report - tadaaa... It also appears on nightly.flarum.site I'm using mobile Safari on iOS 14.1

    Edit: I would not say that it is hard to reproduce... If you are already on top and try to scroll further ("Scroll bouncing" - or when your browser lets you elastically scroll a little bit beyond the top of a page) it happens nearly 100%.

    点赞 评论 复制链接分享
  • weixin_39633113 weixin_39633113 3月前

    Does removing those lines fix the issue locally? I don't have an iphone so I can't test, but if this fixes the issue, it makes sense to me.

    点赞 评论 复制链接分享
  • weixin_39788131 weixin_39788131 3月前

    I don't have an iphone either, so I cannot test, but who has been able to reproduce the issue multiple times has confirmed removing the transform rule fixes the issue.

    点赞 评论 复制链接分享
  • weixin_39685697 weixin_39685697 3月前

    I'm happy to report that removing the lines fixes this for me, too. I use a custom header html code. Using that, the problem did not occur on my .beta15-forum at all, so I first temporary removed the custom header, checked that the issue was there (it was), then applied the fix, and the issue is gone. I did not noticed any negative side-effects yet.

    点赞 评论 复制链接分享
  • weixin_39918747 weixin_39918747 3月前

    Thanks for the report! :raised_hands:

    Has anybody else seen this problem, and - most importantly - on other OS / browser combinations?

    Could you provide a link to where you read about the problems with this transform rule? Thanks for your research!

    点赞 评论 复制链接分享
  • weixin_39828331 weixin_39828331 3月前

    I tried to reproduce this in the latest versions of Chrome and Firefox for iOS and Android as well as Safari on iOS and Samsung's browser for Android. Unfortunately, I was unable to reproduce this issue even with the steps to reproduce provided in this issue.

    点赞 评论 复制链接分享
  • weixin_39563132 weixin_39563132 3月前

    I tried to reproduce this in the latest versions of Chrome and Firefox for iOS and Android as well as Safari on iOS and Samsung's browser for Android. Unfortunately, I was unable to reproduce this issue even with the steps to reproduce provided in this issue.

    Yes, sometimes it’s very hard to reproduce. Other times I get it to happen several times in a row. Here is a gif so that you can fully see what I mean. This shows the demo site, and then the discuss.flarum site as well. This is Chrome iOS, latest version.

    F9-C19-D82-CCE2-47-C4-800-D-085-D6855883-E

    • I read about the transform rule here: https://stackoverflow.com/a/10170170 ...notice the first comment under this answer. It seems this rule can fix these types of issues, but also can cause them.

    Here are some other people talking about it. Even though these say to add this rule, not remove it, all of these types of posts led me to the idea of removing the rule. Again, since I removed the rule, I can no longer reproduce this at my forum.

    https://stackoverflow.com/q/50105780

    https://stackoverflow.com/a/18764086

    https://stackoverflow.com/a/25923988

    I will admit though that this is a very small bug and it may be a while until someone out there can reproduce it to help verify.

    I wonder if this transform rule has always been there or if it was added to fix a different bug? So far, I don’t see anything negative happening as a result of me removing this rule at my forum.

    点赞 评论 复制链接分享
  • weixin_39918747 weixin_39918747 3月前

    I wonder if this transform rule has always been there or if it was added to fix a different bug? So far, I don’t see anything negative happening as a result of me removing this rule at my forum.

    I can only assume here, and would guess it was added to speed up the CSS transition animations: https://github.com/flarum/core/blob/d7a5a6ad14c351d402442daa93eb8cc871f110ef/less/common/mixins/header-background.less#L10

    点赞 评论 复制链接分享
  • weixin_39918747 weixin_39918747 3月前

    Sorry to bother, do you remember what problems line 9 solves?

    https://github.com/flarum/core/blob/d7a5a6ad14c351d402442daa93eb8cc871f110ef/less/common/mixins/header-background.less#L9

    点赞 评论 复制链接分享