Issues with Forum CSS/JS

This just started recently for me. In Chrome, when reading a post that extends beyond the bottom of the screen, scrolling down to the point where “MODX Community” is replaced by the topic’s subject line makes “MODX Community” flash continuously between two locations. It’s a strobe effect and could possibly induce seizures in some readers.

In addition, if you scroll down slowly, the post will keep repositioning with the subject line showing, so you never make it to the end of the post unless you scroll fast. My mouse wheel is set to three lines. Using the mouse wheel slowly means you never get the see the end of the post. Using the scroll bar limits the effect to a single time, but you can still see it.

Thank you for reporting this. I started seeing it a few weeks ago (not sure if that is pandemic time or regular time honestly) and had been about to write it up. Seeing it in Chrome desktop as well as Chrome for Android.
On Chrome for iOS, when scrolling there is a distinct jump that the MODX Community bar makes ay one point, but it doesn’t flash back and forth.

This is probably just an CSS issue and maybe not related but the mentioned header has a top-margin set which I think shouldn’t be there? Atleast it wasn’t there before and creates an odd space between the top navigation and the header:

Looks like it’s just a simple line in CSS causing this though:

// common-scss-brand-header-theme-component.scss:118

.ember-application .d-header {
    margin-top: 48px;
}

On Firefox (82.0.3) this just creates a space, on Chrome this could maybe cause the mentioned issue above.

Thanks for reporting this, Bob. I’ve shared it with the team to review. Hopefully, we can get this resolved soon. The theme is one from Discourse itself that we replaced the logo and colours for.

We seem to have gotten this resolved. Please let us know if it’s still a problem.

Looks good on chrome for android.

Looks good for me except that when scrolling, a tiny bit of the text peaks through above the header/title.

If I uncheck this CSS rule it goes away. Reducing the number slightly also works.

class="desktop-view not-mobile-device text-size-larger no-touch discourse-no-touch">

base.scss:26

html.text-size-larger {
    font-size: 1.01em;
}

Since it’s inherited from html.desktop-view… , it could have side effects.

<html lang="en-US" class="desktop-view not-mobile-device text-size-larger no-touch discourse-no-touch">

The effect is pretty trivial and may not effect everyone, so it may not be worth fixing.