Gmail中通过Apps Script发送的格式化邮件文本被隐形元素遮挡问题排查与修复咨询

Problem Description #

I'm using Apps Script's MailApp.sendEmail to send formatted emails built from HTML templates. Users configure email details via a web app, and the .gs file handles template rendering and delivery. Everything works perfectly on mobile Gmail and other email clients, but desktop Gmail has a frustrating bug: occasionally, an invisible rounded element (which I never defined in my code) covers parts of the text. It sometimes only appears when adjusting screen resolution, other times it shows up immediately.

After hours of testing, I confirmed this is caused by the CSS mix-blend-mode rules I added to fix color display issues in iOS Gmail's dark mode. Here's the relevant CSS:

div { flex-grow:1; } 
u + .body .gmail-blend-screen { background:#000; mix-blend-mode:screen;}
u + .body .gmail-blend-screen-title { mix-blend-mode:screen;}
u + .body .gmail-blend-difference { background:#000; mix-blend-mode:difference;}
u + .body .gmail-blend-title { mix-blend-mode:initial;}

I use these classes to adjust text colors for dark mode:

• difference to turn black text white in dark mode
• initial to keep green text from turning pink (a side effect of difference mode)

The bug triggers specifically when I use multiple separate blend-mode divs (necessary because I have images between the email body and footer that I don't want affected by blending):

<!-- Works fine, but can't use this because images would be affected by blending -->
<div class="main-div-with-background"> 
  <div class="gmail-blend-screen"> 
    <div class="gmail-blend-difference"> ** FULL EMAIL CONTENT ** </div> 
  </div> 
</div> 

<!-- Triggers the invisible rounded element bug -->
<div class="main-div-with-background"> 
  <div class="gmail-blend-screen"> 
    <div class="gmail-blend-difference"> ** EMAIL BODY ** </div> 
  </div> 
  <table> ** TABLE WITH IMAGES ** </table> 
  <div class="gmail-blend-screen"> 
    <div class="gmail-blend-difference"> ** EMAIL FOOTER ** </div> 
  </div> 
</div>

Root Cause #

Gmail's desktop client uses a modified Blink rendering engine with strict email-specific rules. When you have multiple separate mix-blend-mode containers interspersed with non-blended elements (like your image table), the browser creates separate composite layers for each blended section.

Gmail injects default styles into certain container elements (including subtle rounded corners) for its own UI, and in this edge case, those styles get incorrectly applied to the composite layers created for your blend-mode divs. Since the layers use mix-blend-mode, their background becomes transparent, making the rounded corners appear as invisible shapes blocking your text.

Solutions #

1. Replace Mix-Blend-Mode with Dark Mode Media Queries (Recommended)

Gmail now supports prefers-color-scheme media queries (even on iOS), so you can avoid mix-blend-mode entirely by targeting dark mode directly. This eliminates the rendering layer bug at its source:

/* Light mode defaults */
.body-text { color: #000; }
.title-text { color: #008000; }

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .body-text { color: #ffffff; }
  .title-text { color: #00e000; /* A brighter green that works on dark backgrounds */ }
}

/* Fix for Gmail desktop's forced color inversion */
u + .body .body-text { color: #000; }
@media (prefers-color-scheme: dark) {
  u + .body .body-text { color: #ffffff; }
}

2. Fix the Mix-Blend-Mode Implementation

If you need to keep using mix-blend-mode for compatibility, force override Gmail's default styles and optimize your DOM structure:

• Add explicit border-radius: 0 !important to all blend-mode classes to cancel out Gmail's injected rounded corners
• Use position: relative and z-index to adjust layer stacking and prevent text from being obscured
• Minimize nested blend containers where possible

Updated CSS:

div { flex-grow:1; } 
u + .body .gmail-blend-screen { 
  background:#000; 
  mix-blend-mode:screen;
  border-radius: 0 !important;
  position: relative;
  z-index: 1;
}
u + .body .gmail-blend-screen-title { 
  mix-blend-mode:screen;
  border-radius: 0 !important;
}
u + .body .gmail-blend-difference { 
  background:#000; 
  mix-blend-mode:difference;
  border-radius: 0 !important;
}
u + .body .gmail-blend-title { 
  mix-blend-mode:initial;
  border-radius: 0 !important;
}

3. Test Rigorously

Send test emails to a Gmail account and check across multiple screen resolutions. Tools like Mailtrap can help preview Gmail's rendering without cluttering your inbox.

内容的提问来源于stack exchange，提问作者Galdil