Jittery scrolling behavior

Product Support

AI-generated summary

jayarr reported jittery scrolling behavior on mobile after updating to the latest Discourse beta, which they traced to their theme, Discourse Air. Initially, they applied a CSS fix (display: inline;) to resolve a word-wrap issue, but this introduced scrolling stuttering. After further testing, they discovered that replacing display: inline; with grid-template-columns: none; in the same media query resolved both the original word-wrap problem and the new scrolling issue without side effects. The problem did not occur in safe mode, confirming it was theme-related. jayarr shared the corrected CSS for others who may encounter the same issue.

1

Hi all,

I’ve been having some strange issues this week following an update to the latest Discourse beta.

The first involved a bizarre word wrap issue where the text of posts was getting word-wrapped halfway across the screen on mobile. (You can see the same effect still on the theme’s official demo site, specifically in the mobile view: http://discourse.jordanvidrine.com/)

I narrowed down the cause to being related to my theme (Discourse Air) and, in lieu of an official fix from the developer as of yet, came up with a CSS fix of my own based on what I was seeing in the Chrome inspect tool:

@media (max-width: 790px) {
.container.posts {
    display: inline;
}
}

That fixed the glitch. But now, I’m running into a new issue where the screen sporadically jumps and stutters while scrolling through topics:

Google Photos

There’s almost certainly some relation. In safe mode, the stuttering effect does not happen. So it’s almost certainly connected to the theme (which had been rock solid up until this point) and quite possibly also my fix for the previous issue.

But I’m at a loss as to what to try next, so I was hoping maybe someone here might have a suggestion.

Grateful for any help or points in the right direction!

2

UPDATE: With a bit more digging and experimentation, I seem to have fixed this. In case anyone else is running into the same issue, the corrected CSS (that addresses the original issue without introducing the jittering) is:

@media (max-width: 790px) {
.container.posts {
     grid-template-columns: none;
}
}