Formatted emails does not display properly on gmail

I use Apps Script to send formatted emails via MailApp.sendEmail function.

1. Users can configure e-mail in a variety of ways in my web application
2. After that my application sends this informations to the .gs file
3. Then Apps Script creates template from HTML file and sends it via sendEmail function
4. Everything looks fine until... you open this email in gmail mailbox.

And this is where the fun begins. Sometimes everything looks fine and sometimes some text is hidden by an invisible element (I have no idea what it is, it has rounded shape when I don't use any roundings in my e-mail). Often this element does not appear until the resolution is reduced (or increased), sometimes it appears immediately.

As this problem only occurs on computers in gmail mailbox (on phone and on other mailbox email looks fine) my prime suspect is blend mode (I used it to fix colors on iOS Gmail App Dark mode).

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

How I use it:

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

So I want to ask:

1. What causes an invisible field to appear obscuring the text? (I can send you more code if you think it's not the blend's fault)
2. How to fix it?

EDIT: I have just checked my thesis and managed to confirm it, blend mode is to blame.

I have 2 blend modes - one of them is difference, second one is initial. I use first one to change the black text into white (on dark mode). Second one is for changing green text into other color (because difference mode makes it pink).

How I want to use it:

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

EDIT 2: After hours of tests I found another fact - this problem occurs when I use more than one div with blend class. I have to use multiple divs because I have two images between body and footer of my email and I don't want them to be blended. You can find some hints below:

<!-- 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>