I tried the website on different mobile screens, and the text is consistent, doesn’t seem to have any issue.
Topic summary
A user is troubleshooting a marquee banner that displays correctly on mobile initially but then unexpectedly increases text size after a few seconds. The banner also breaks text at pipe characters (|) instead of displaying them.
Key Issues Identified:
- Text size randomly increases on mobile after initial load
- Pipe characters (|) being replaced with whitespace, breaking the intended display
Solutions Provided:
Pipe Character Issue: Removing the JavaScript line let improvedText = str.replaceAll("|", " ") successfully fixed the whitespace problem.
Text Size Glitch: Two alternative code solutions were offered:
- A complete replacement marquee section with configurable height and font size settings
- A JavaScript-based fix using Claude Code that ensures content fully loads before cloning, preventing the “flash and disappear” issue
The second solution specifically addresses timing issues by waiting for DOM content to load and adding a 300ms delay before initializing the marquee animation. The original poster confirmed the pipe issue was resolved but the intermittent text sizing problem on mobile remained under investigation.
