Debugging Invisible Watermarks: When Headless Chrome Plays Font Hide-and-Seek

Just wrapped up a frustrating but educational debugging session on StreamStack. Had this ghost watermark that was supposedly rendering but completely invisible in production. Classic case of "works on my machine" syndrome.

The Mystery of the Missing Watermark

Started with the usual suspects - z-index issues, positioning problems, maybe the AbsoluteFill wrapper was acting up. Tried every CSS trick in the book. Nothing.

Then I went nuclear. Threw a giant red bar where the watermark should be. Boom - it rendered perfectly. So the positioning was fine, the AbsoluteFill was working, but my text was still invisible.

The Headless Chrome Font Trap

Turns out Railway's headless Chromium environment has a fun quirk - it can't load regular CSS font-family strings like "Courier New". The text was rendering with literally zero glyphs. Invisible text that takes up no space.

The fix? Switched to @remotion/google-fonts/Inter with proper font loading. This actually bundles the font for headless rendering instead of hoping the system has it installed.

The Plot Twist

While digging around, I discovered there's already a Watermark.tsx component in the codebase. But it gets skipped for dossier scenes with this conditional: {!isDossier && <Watermark>}. So folder scenes need their own inline watermark anyway.

Ended up with a clean solution - watermark in its own AbsoluteFill with zIndex 9999, using the accent color at 30% opacity, positioned bottom-right. Works across all the different channel accent colors.

Lessons Learned

• Headless Chrome environments are picky about fonts
• When CSS fonts fail in headless mode, text just disappears
• @remotion/google-fonts is your friend for reliable font loading
• Sometimes the "nuclear test" approach (giant red bar) is the fastest way to isolate the problem

Got a decent commit history out of this debugging session, though I might squash some of the debug commits later. The watermark is working solid now - might extend it to other scene types down the road.