Troubleshooting Common Rendering Issues
Diagnostic guide and fixes for Outlook 1px borders, Gmail clipping, font reversion, image explosion, and mobile alignment bugs.
Key Takeaways
- Outlook 1px horizontal line bug: caused by odd-numbered heights or decimal font sizes in Outlook 120 DPI mode.
- Gmail message clipping: caused by HTML source code exceeding 102 KB. Enable PostBrix minification to fix.
- Times New Roman font bug: caused by web fonts missing explicit MSO conditional fallback stacks.
- Image explosion: caused by omitting explicit pixel width attributes on <img> tags.
1. Outlook Thin Horizontal Lines (120 DPI Bug)#
Symptom: Thin, faint horizontal lines appear across background colors in Windows Outlook. Cause: Outlook desktop running on high-DPI Windows displays scales 96 DPI to 120 DPI (125% scaling). When a table cell has an odd height or non-integer padding, Outlook's rounding logic produces a 1-pixel gap. Fix: In PostBrix, ensure all padding, spacer heights, and font sizes are even numbers (e.g., use 16px or 20px, never 15px or 17px).
2. Gmail "[Message Clipped]" Warning#
Symptom: Gmail cuts off the bottom of the email and hides the footer behind a clip link. Cause: The compiled HTML source exceeds 102 KB (104,448 bytes). Fix:
- In the PostBrix Export dialog, enable Minify HTML.
- Avoid pasting gigantic chunks of inline SVG or base64 data into raw text blocks.
- Keep template size under 80 KB to allow headroom for ESP tracking wrappers.
3. Fonts Reverting to Times New Roman in Outlook#
Symptom: Beautiful custom Google Fonts turn into Times New Roman in Outlook 2016–2021.
Cause: Outlook does not support web fonts and fails to fall back properly if quotes or generic fallbacks are misplaced.
Fix: PostBrix automatically wraps web fonts in <!--[if !mso]><!--> and generates an Outlook-only system font override rule (Arial, sans-serif) in the head.
4. Image Explosion Bug in Desktop Outlook#
Symptom: High-resolution 2x images appear at massive full camera resolution, expanding beyond the 600px email container.
Cause: Outlook ignores CSS max-width: 100% and reads only the physical HTML width="..." attribute.
Fix: PostBrix automatically writes the exact display pixel width attribute onto the <img> tag. Ensure you set a display width in the image inspector.
Frequently Asked Questions
Why does Gmail on Android display my email in a tiny, unreadable font?
This happens when an element has a fixed pixel width wider than the mobile screen (like a 600px table without fluid container wrapping). Ensure all content is inside responsive PostBrix columns.
Why do my button backgrounds disappear when forwarded in Outlook?
Forwarding in Outlook strips VML vector graphics. PostBrix uses hybrid bulletproof buttons with solid table cell background color fallbacks beneath the VML layer to ensure buttons stay colored even when forwarded.