Brace yourself. This is a very strange issue. On my iPhone, in iOS Chrome, if I swipe up hard (scroll to the top fast), sometimes once I hit the top, the text in the header nav bar disappears. As soon as I scroll again it reappears.
I use the solid color header if that makes a difference (setting in appearance in admin). I believe the LESS that is used is: https://github.com/flarum/core/blob/master/less/common/mixins/header-background.less
This issue does not happen here at discuss.flarum.org as often as it happens at my forum. So, it could be an extension causing it. But, I was able to get it to happen once even here at discuss.flarum.org.
During my research I found this stack overflow post which describes a similar issue and a fix is to add -webkit-transform: translate3d(0,0,0) to the element. https://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela
Now, here's where I get really confused. The LESS mentioned above already includes transform: translate3d(0,0,0)... it's almost as if Toby or whomever originally added that knew about this type of issue so they added this translate3d trick. So, if this trick is already in place... why am I having this disappearing text issue?
I decided to try removing this rule. In my custom CSS I set transform for this element to "initial" which essentially eliminates the rule:
.App:before {
-webkit-transform: initial;
transform: initial;
}
And now, my disappearing text issue on a hard scroll up on iOS is gone!
So, if i found a fix, why am I posting this? Because, I wonder if anyone very close to Flarum development would know exactly why this transform rule was added in the first place? And, do you think I could be messing anything else up by setting it to "initial" ?
