Discussion page scrolling issue on iOS

[GreXXL]

Current Behavior

Currently on a discussions page it’s possible to scroll horizontally which is influencing the browsing experience.

https://files.fm/f/43rjsdfks

As stated in a discussion this might be a new big since at least 1.5.0 (https://discuss.flarum.org/d/32014-how-to-downgrade-from-162-to-14)

Steps to Reproduce

Open a discussion page on any Flarum Forum

Expected Behavior

No horizontal scroll possible like it also is the case in „All discussions“ page.

Screenshots

No response

Environment

• Flarum version: 1.6.1
• Website URL: https:/discussion.Flarum.org
• Browser: Latest iOS Safari

Output of php flarum info

Output of "php flarum info", run this in terminal in your Flarum directory.

Possible Solution

No response

Additional Context

No response

[ekumanov]

Here's a CSS that I found fixes the issue:

html, body{
  overflow-x: hidden;
}

However I'm not sure it's a proper fix. I'm not a web developer and that CSS might negatively impact something else. As a matter of fact, the issue appeared after 1.5 and it affects only the discussion view (when you have open a discussion and scrolling it) and not the main view with the list of all discussions. So, apparently the root cause is something else and it's a regression and I'm not sure a global CSS like the one above should be the solution.

[matteocontrini]

I remember that the overflow-x: hidden was there on .App in the past but was removed in #3540, released in 1.5.0. I think that's the reason why the problem started to appear in 1.5.0.

However it seems that the property interfered with the sticky sidebar, so it might be worth checking if it's still a problem @SychO9

[SychO9]

Thanks @matteocontrini, I couldn't find why the change had been made. It does interfere with sticky positioning. So reverting that won't work then.

[ekumanov]

I also discovered that the CSS in question affects the sticky sidebar. However since there's no sidebar on mobile, I enable the CSS only for mobile:

@media @phone {
  html, body{
    overflow-x: hidden;
  }
}

This seems to be working fine without affecting the sidebar on desktop.