Gmail incorrectly prefixes class names when translation is enabled

[M-J-Robbins]

When clicking the "View translated message" in Gmail, the content of the email is translated. But also the rendering changes as the CSS no longer matches the HTML.

Showing my original message Gmail is rendering

<div id=":2an" class="a3s aiL msg4527639058425575520">
<u></u>
<div>
  <div role="article" aria-label="email name" lang="en" dir="ltr" style="font-size:medium;font-size:max(16px,1rem)">
    <h1 class="m_4527639058425575520foo">Gmail préfixe incorrectement les noms de classe lorsque la traduction est activée
</h1><div class="yj6qo"></div><div class="adL">
  </div></div><div class="adL">
</div></div><div class="adL">
</div></div>

And styles

.msg4527639058425575520 .m_4527639058425575520foo{
  background:green
}

---

After clicking translate, the original email is set to display:none and a copy of the content is created adjacent to it as

<div id=":3kz" class="a3s aiL " dir="ltr">
<u></u>
<div>
  <div lang="en" dir="ltr" style="font-size:medium;font-size:max(16px,1rem)">
    <h1 class="m_8895087920744474942foo"> Gmail incorrectly prefixes class names when translation is enabled</h1>
  </div>
</div>
</div>

Here we can see the class msg4527639058425575520 isn't included on the wrapping div. And the class on the h1 is changed from m_4527639058425575520foo to m_8895087920744474942foo The CSS stays the same.

---

This appears to be very similar to a previous issue Gmail incorrectly prefixes HTML when turning images on

[M-J-Robbins]

I've tested the code with both lang="en" and lang="fr" same thing happens in both.

[thelefflaNA]

Not sure if this is ideal, but have you tried in-lining the background-color and used padding to achieve the desired spacing on the text?