Bug: RevealOnScroll hides content permanently without JS #475

New issue

Open

opened 2026-04-16 07:10:17 +00:00 by jjalangtry · 0 comments

jjalangtry commented

2026-04-16 07:10:17 +00:00

(Migrated from github.com)

Problem

`RevealOnScroll` starts every wrapped element at `opacity-0 translate-y-4` and only makes it visible when an `IntersectionObserver` fires. Without JS, the observer never fires — content is permanently invisible. This is a content-hiding bug, not just a missing fallback.

Affected File

`next/components/common/RevealOnScroll.tsx`

Steps to Reproduce

Disable JavaScript in your browser
Visit any page that uses `RevealOnScroll` (e.g. the About or Leadership pages)
Observe that sections of content are blank

Fix

Flip the animation logic: start visible by default, and use JS to add the pre-animation hidden class before the element enters the viewport. This way content is always accessible and the animation is a pure enhancement.

As an immediate patch, add to `next/app/layout.tsx`:

```html
\`\`\`

Priority

P0 — content is actively hidden for any noscript user on affected pages.

## Problem \`RevealOnScroll\` starts every wrapped element at \`opacity-0 translate-y-4\` and only makes it visible when an \`IntersectionObserver\` fires. **Without JS, the observer never fires — content is permanently invisible.** This is a content-hiding bug, not just a missing fallback. ## Affected File \`next/components/common/RevealOnScroll.tsx\` ## Steps to Reproduce 1. Disable JavaScript in your browser 2. Visit any page that uses \`RevealOnScroll\` (e.g. the About or Leadership pages) 3. Observe that sections of content are blank ## Fix Flip the animation logic: **start visible by default**, and use JS to add the pre-animation hidden class *before* the element enters the viewport. This way content is always accessible and the animation is a pure enhancement. As an immediate patch, add to \`next/app/layout.tsx\`: \`\`\`html <noscript> <style>.reveal-target { opacity: 1 !important; transform: none !important; }</style> </noscript> \`\`\` ## Priority P0 — content is actively hidden for any noscript user on affected pages.