Truth Entries Invisible + Firebase Rules Fix
Fixed The Truth page showing no content after the Firebase voting update.
🐞 Bug 1 — Truths invisible on page load
- Root cause: truth entries had
opacity: 0in CSS by default, relying on JS adding a.visibleclass to show them. When truth.js becametype="module"for Firebase, the script deferred and the IntersectionObserver missed elements already in the viewport. - Fix: entries are now visible by default. JS adds
.animatedonly to entries below the fold. Already-visible entries are never hidden. - Animation is now progressive enhancement — content is always visible regardless of JS timing or errors.
🐞 Bug 2 — Firebase rules syntax error
- The Firestore rules had invalid syntax:
allow read: trueis not valid — Firestore requiresallow read: if true. - A second typo in the provided rules also caused a parse error on the write line.
- Corrected rules use
allow read: if true; allow write: if true;scoped to/votes/{"{truthId}"}.
📝 Dev Note
Never use CSS to hide content that JS is responsible for showing. If JS fails or times out, the user sees nothing. Content should always be visible by default — JS should only add animations on top. This is called progressive enhancement.
Firestore rules have their own syntax distinct from JavaScript. allow read: true looks valid but is a parse error. Firestore always requires allow read: if <condition> even when the condition is the literal true.