格式化的电子邮件在 gmail 上无法正确显示

Question

我使用 Apps 脚本通过 MailApp.sendEmail 函数发送格式化电子邮件。

1. 用户可以在我的网络应用程序中以多种方式配置电子邮件
2. 之后我的应用程序将此信息发送到 .gs 文件
3. 然后 Apps 脚本从 HTML 文件创建模板并通过 sendEmail 函数发送它
4. 一切看起来都很好，直到...您在 gmail 邮箱中打开这封电子邮件。

这就是乐趣的开始。有时一切看起来都很好，有时某些文本被不可见元素隐藏（我不知道它是什么，当我在电子邮件中不使用任何舍入时它具有圆形形状）。通常，这个元素直到分辨率降低（或增加）后才会出现，有时它会立即出现。

由于此问题仅发生在 Gmail 邮箱中的计算机上（在手机和其他邮箱电子邮件上看起来不错），我的主要怀疑是混合模式（我用它来修复 iOS Gmail 应用程序深色模式上的颜色）。

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;}

我如何使用它：

   <div class="gmail-blend-screen">
    <div class="gmail-blend-difference">
       W razie jakichkolwiek pytań proszę o kontakt.<br>
       Serdecznie pozdrawiam
    </div>
   </div>

所以我想问：

1. 是什么导致不可见字段出现并遮盖了文本？ （如果您认为这不是混合的错，我可以向您发送更多代码）
2. 如何解决？

编辑：我刚刚检查了我的论文并设法确认了它，混合模式是罪魁祸首。

我有两种混合模式 - 其中一种是差异模式，第二种是初始模式。我使用第一个将黑色文本更改为白色（在深色模式下）。第二个是将绿色文本更改为其他颜色（因为差异模式使其变为粉红色）。

我想如何使用它：

<div class="gmail-blend-screen-title">
  <div class="gmail-blend-title">
    <p class="title">***TITLE GREEN TEXT CHANGED TO GREEN ON DARK MODE***</p>
  </div>
</div>
<div class="gmail-blend-screen">
  <div class="gmail-blend-difference">
    NORMAL WHITE TEXT CHANGED TO WHITE ON DARK MODE
  </div>
</div>

编辑2： 经过几个小时的测试，我发现了另一个事实 - 当我使用多个具有混合类的 div 时，就会出现此问题。我必须使用多个 div，因为我的电子邮件正文和页脚之间有两个图像，我不希望它们混合在一起。您可以在下面找到一些提示：

<!-- THIS CODE WORKS WELL BUT I CAN NOT USE IT BECAUSE OF IMAGES -->
<div class="main-div-with-background">
  <div class="gmail-blend-screen">
     <div class="gmail-blend-difference">
       ** FULL EMAIL **
     </div>
  </div>
</div>

<!-- THIS CODE CAUSES PROBLEM WITH INVISIBLE TEXT -->
<div class="main-div-with-background">
  <div class="gmail-blend-screen">
     <div class="gmail-blend-difference">
       ** FULL EMAIL **
     </div>
  </div>
  <table> ** TABLE WITH IMAGES ** </table>
  <div class="gmail-blend-screen">
     <div class="gmail-blend-difference">
       ** FOOTER **
     </div>
  </div>
</div>

Answer 1

我没有解决办法，但我有更多信息。我已经研究这个问题很长一段时间了，因为我们经常遇到同样的问题，因为我们使用相同的“黑客”应用混合模式来控制暗模式样式。

我还没有找到明确的证据，但我相信这是一个 z 索引或复合层问题。为了使混合工作正常，浏览器基本上需要将项目堆叠在新层中。此时，Gmail Web UI 中的某些内容也在该层上，并且它们发生碰撞。

这只发生在我们特定的浏览器尺寸（大约 12" MBP 和 Macbook Airs 的尺寸）1200ish x 600ish 中，所以我相信不可见元素在 DOM 中有空间。

您可以通过更改电子邮件容器的 z-index 或其他任何内容来验证这可能是分层问题。我将分享该错误的屏幕截图，然后如何重置所有内容以设置 z-index 来修复它。

由于我们需要 Gmail 来修复 z 索引，因此我们开始避免使用黑客攻击，并让 Gmail 应用程序使用无法覆盖的深色模式颜色来销毁我们的电子邮件。