Problem with application_wrapper.html.erb

Infos:

  • Used Zammad version: 6.3.1-1718860451.0f341764.bullseye
  • Used Zammad installation type: package
  • Operating system: Debian 12
  • Browser + version: Chrome, 126.0.6478.127

Expected behavior:

When sending emails, the styles defined in application_wrapper.html.erb are used.

Actual behavior:

We recently upgraded Version 5.3 to 6.3, respecting the upgrade path, so we did the step to 6.0 inbetween.
Recently, we noticed that our outgoing messages aren’t using the configured font/size settings anymore.

We’ve investigated and found that there might be a problem with the ###html# variable within applicaiton_wrapper.html.erb.

In short, we used a slightly modified .erb file, so we swapped for the original .erb file which we kept, just in case.
However, even with the original .erb file our configured font/size settings weren’t beieng used.

We tried both, setting font/size via the rails console Setting.set(‘html_email_css_font’,…) and, after that, writing our desired settings into the .erb file, removing the ###html_email_css_font### variable, neither worked.

We kept investigating, removing style-settings bracket by bracket, to find out where the file breaks.
However, it wasn’t until we removed ###html### (and overwrote it with dummy-test, making outgoing e-mails completely useless ofc.) that we saw our style-settings taking effect again.

From Outlook, we pulled the source files of the mails, containing the html formatting.

We found that, when ###html### is used, zammad places a tag right after the first meta tag, thus rendering the later defined style settings ineffective.
When we replaced ###html### with a string, suddenly the emails were beeing sent with correct settings, no extra tags anywhere in sight.

I’ve attached screenshots, our used .erb files and the html-source files from the test emails for comparison.
Hope this is an easy fix! :slight_smile:

Modified .erb body { font-family:Arial,Sans-Serif; font-size: 14.5px; } img { outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; } a:link { color: black; background-color: transparent; text-decoration: underline; } a:visited { color: black; background-color: transparent; text-decoration: underline; } a:hover { color: black; background-color: transparent; text-decoration: underline; } a:active { color: black; background-color: transparent; text-decoration: underline; } a img { border: none; } table td { border-collapse: collapse; } table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border: none; table-layout: auto; display: block; width: 100%; overflow: auto; word-break: keep-all; } table, pre, blockquote { margin: 0 0 16px; } td, th { padding: 7px 12px; } th { font-weight: bold; text-align: center; } col { width: auto; } p { margin: 0; } code { border: none; background: hsl(0,0%,97%); white-space: pre-wrap; } blockquote { padding: 8px 12px; border-left: 5px solid #eee; } pre { padding: 12px 15px; font-size: 13px; line-height: 1.45; background: hsl(0,0%,97%); white-space: pre-wrap; border-radius: 3px; border: none; overflow: auto; } ###html###
original .erb body { ###html_email_css_font###; } img { outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; } a img { border: none; } table td { border-collapse: collapse; } table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border: none; table-layout: auto; display: block; width: 100%; overflow: auto; word-break: keep-all; } table, pre, blockquote { margin: 0 0 16px; } td, th { padding: 7px 12px; } th { font-weight: bold; text-align: center; } col { width: auto; } p { margin: 0; } code { border: none; background: hsl(0,0%,97%); white-space: pre-wrap; } blockquote { padding: 8px 12px; border-left: 5px solid #eee; } pre { padding: 12px 15px; font-size: 13px; line-height: 1.45; background: hsl(0,0%,97%); white-space: pre-wrap; border-radius: 3px; border: none; overflow: auto; } ###html###
HTML Source received while using ###html###

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
  body {
    font-family:Arial,Sans-Serif;font-size:11pt;
  }
  img {
    outline: none;
    text-decoration: none;
    -ms-interpolation-mode: bicubic;
  }
  a img {
    border: none;
  }
  table td {
    border-collapse: collapse;
  }
  table {
    border-collapse: collapse;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
    border: none;
    table-layout: auto;
    display: block;
    width: 100%;
    overflow: auto;
    word-break: keep-all;
  }
  table,
  pre,
  blockquote {
    margin: 0 0 16px;
  }
  td, th {
    padding: 7px 12px;
  }
  th {
    font-weight: bold;
    text-align: center;
  }
  col {
    width: auto;
  }
  p {
    margin: 0;
  }
  code {
    border: none;
    background: hsl(0,0%,97%);
    white-space: pre-wrap;
  }
  blockquote {
    padding: 8px 12px;
    border-left: 5px solid #eee;
  }
  pre {
    padding: 12px 15px;
    font-size: 13px;
    line-height: 1.45;
    background: hsl(0,0%,97%);
    white-space: pre-wrap;
    border-radius: 3px;
    border: none;
    overflow: auto;
  }
</style>

This E-Mail was sent using the original .erb File.


Mit freundlichen Grüßen / kind regards

& 2nd Mail:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
  body {
    font-family:Arial,Sans-Serif,"Comic Sans";
	font-size: 14.5px;
  }
  img {
    outline: none;
    text-decoration: none;
    -ms-interpolation-mode: bicubic;
  }
  a:link {
	color: black;
	background-color: transparent;
	text-decoration: underline;
  }
  a:visited {
	color: black;
	background-color: transparent;
	text-decoration: underline;
  }
  a:hover {
	color: black;
	background-color: transparent;
	text-decoration: underline;
  }
  a:active {
	color: black;
	background-color: transparent;
	text-decoration: underline;
  }
  a img {
    border: none;
  }
  table td {
    border-collapse: collapse;
  }
  table {
    border-collapse: collapse;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
    border: none;
    table-layout: auto;
    display: block;
    width: 100%;
    overflow: auto;
    word-break: keep-all;
  }
  table,
  pre,
  blockquote {
    margin: 0 0 16px;
  }
  td, th {
    padding: 7px 12px;
  }
  th {
    font-weight: bold;
    text-align: center;
  }
  col {
    width: auto;
  }
  p {
    margin: 0;
  }
  code {
    border: none;
    background: hsl(0,0%,97%);
    white-space: pre-wrap;
  }
  blockquote {
    padding: 8px 12px;
    border-left: 5px solid #eee;
  }
  pre {
    padding: 12px 15px;
    font-size: 13px;
    line-height: 1.45;
    background: hsl(0,0%,97%);
    white-space: pre-wrap;
    border-radius: 3px;
    border: none;
    overflow: auto;
  }
</style>

This E-Mail was sent using our modified .erb File.


Mit freundlichen Grüßen / kind regards
HTML Source received when replacing ###html### with static text body { font-family:Arial,Sans-Serif;font-size:11pt; } img { outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; } a img { border: none; } table td { border-collapse: collapse; } table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border: none; table-layout: auto; display: block; width: 100%; overflow: auto; word-break: keep-all; } table, pre, blockquote { margin: 0 0 16px; } td, th { padding: 7px 12px; } th { font-weight: bold; text-align: center; } col { width: auto; } p { margin: 0; } code { border: none; background: hsl(0,0%,97%); white-space: pre-wrap; } blockquote { padding: 8px 12px; border-left: 5px solid #eee; } pre { padding: 12px 15px; font-size: 13px; line-height: 1.45; background: hsl(0,0%,97%); white-space: pre-wrap; border-radius: 3px; border: none; overflow: auto; } We have removed the html-variable.


Hi @Merva.

No idea what you did, but the source file looks completely different for me … please compare it with zammad/app/views/mailer/application_wrapper.html.erb at stable · zammad/zammad · GitHub and adjust it when needed. Just be aware that you need to re-apply all your changes whenever you update.

Hi fliebe92,

thanks for the reply!
Actually, I don’t know what happened. Both .erb files were completely structured before I copy/pasted them in here.(And the files, at least, still are.) I guess I must’ve done something weird while pasting. Sorry!

I just did a text comparison between the file you linked and the one we use in production, and both are identical.

Just to make sure I applied the linked config and tested again, but we still face the same issue.

When we check the source of the email via outlook, this is what it looks like:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><body>

  
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style type="text/css">
      body {
        font-family:Arial,Sans-Serif;font-size:11pt
      }
      img {
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
      }
      a img {
        border: none;
      }
      table td {
        border-collapse: collapse;
      }
      table {
        border-collapse: collapse;
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
        border: none;
        table-layout: auto;
        display: block;
        width: 100%;
        overflow: auto;
        word-break: keep-all;
      }
      table,
      pre,
      blockquote {
        margin: 0 0 16px;
      }
      td, th {
        padding: 7px 12px;
      }
      th {
        font-weight: bold;
        text-align: center;
      }
      col {
        width: auto;
      }
      p {
        margin: 0;
      }
      code {
        border: none;
        background: hsl(0,0%,97%);
        white-space: pre-wrap;
      }
      blockquote {
        padding: 8px 12px;
        border-left: 5px solid #eee;
      }
      pre {
        padding: 12px 15px;
        font-size: 13px;
        line-height: 1.45;
        background: hsl(0,0%,97%);
        white-space: pre-wrap;
        border-radius: 3px;
        border: none;
        overflow: auto;
      }
    </style>
  
  Test with .erb from github.<br><br><div data-signature="true" data-signature-id="2">
<div>
<div><br></div>
<div>Mit freundlichen Grüßen / kind regards<br>
</div>
</div>
</body>

Again we have an opening tag right after the first tag at the beginning of the file.
However, that is only the case when we have ###html### between the tags inside the .erb file.

As soon as we replace the ###html### variable, the emails html source we send from Zammad and receive in outlook looks like this:

<!DOCTYPE html><html dir="auto"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style type="text/css">
      body {
        font-family:Arial,Sans-Serif;font-size:11pt
      }
      img {
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
      }
      a img {
        border: none;
      }
      table td {
        border-collapse: collapse;
      }
      table {
        border-collapse: collapse;
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
        border: none;
        table-layout: auto;
        display: block;
        width: 100%;
        overflow: auto;
        word-break: keep-all;
      }
      table,
      pre,
      blockquote {
        margin: 0 0 16px;
      }
      td, th {
        padding: 7px 12px;
      }
      th {
        font-weight: bold;
        text-align: center;
      }
      col {
        width: auto;
      }
      p {
        margin: 0;
      }
      code {
        border: none;
        background: hsl(0,0%,97%);
        white-space: pre-wrap;
      }
      blockquote {
        padding: 8px 12px;
        border-left: 5px solid #eee;
      }
      pre {
        padding: 12px 15px;
        font-size: 13px;
        line-height: 1.45;
        background: hsl(0,0%,97%);
        white-space: pre-wrap;
        border-radius: 3px;
        border: none;
        overflow: auto;
      }
    </style>
  </head>
  <body style="font-family:Arial,Sans-Serif;font-size:11pt;">We replaced the html-variable.</body>
</html>

Which is completely fine, and is “as it should be”.

I just noticed upon re-reading, the message board is eating up parts of my posts.

I’M talking about

<body></body>

Tags. In the first codeblock, we can see that there is an opening

body-tag. right after the first meta-tag.

This happens on every outgoing message.
However, when we replace the ###html### variable within the body-/body-tags inside of the .erb file, then we suddenly get email with an html source as we “would expect them to be”.

Hope that clears it up.

Sorry, I don’t know. This sounds strange to me and does not fit to how mails are constructed + send out in Zammad context.

Maybe this helps.

Thanks for the suggestion,
but my problem isn’t the html_email_css_font variable, but rather
###html### breaking the application_wrapper.

I’d be willing to showcase / demonstrate the issue I’m facing in detail via a teams/teamviewer session, if that would help.

No idea how this should happen, really.

Sorry we cannot provide community support via teamviewer or anything like that without a workshop.

I have additional info.

This issue (additional body tags appearing where they shouldn’t be) appears to be related to signatures or images in mails.

I did some test without an attached signature, and suddenly we sent out emails with proper settings again.

I then took our default signature, which contains images, and removed said images.
It still worked fine.

After placing the images back into the signature, we instantly got mails with broken settings again. (Speaking about extra body-tags.)

When your signature is breaking the HTML … well, then fix your signature. :smiley:

Hi fliebe92,

thanks for getting back to me!
Your reply made me curious, if it really is my signature that is breaking the html.

I tested by disabling the signature, sending an email - Works as expected. Good! :smiley:

I sent another email, signature still disabled, but copied an image into the text field: Broken.

It is not our signature that is breaking things.

At this point I think this is a bug report, and I’d ask you to investigate or try to reproduce this on a test environment.

I will recap the important bits of information:

Currently, we are using the application_wrapper.html.erb that you linked, we have not modified this file.

Our ###html_email_css_font### setting is attached as a screenshot.

This is the html source that we receive when we send emails WITHOUT images embedded:

<!DOCTYPE html><html dir="auto"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style type="text/css">
      body {
        font-family:Calibri;font-size:11pt;
      }
      img {
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
      }
      a img {
        border: none;
      }
      table td {
        border-collapse: collapse;
      }
      table {
        border-collapse: collapse;
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
        border: none;
        table-layout: auto;
        display: block;
        width: 100%;
        overflow: auto;
        word-break: keep-all;
      }
      table,
      pre,
      blockquote {
        margin: 0 0 16px;
      }
      td, th {
        padding: 7px 12px;
      }
      th {
        font-weight: bold;
        text-align: center;
      }
      col {
        width: auto;
      }
      p {
        margin: 0;
      }
      code {
        border: none;
        background: hsl(0,0%,97%);
        white-space: pre-wrap;
      }
      blockquote {
        padding: 8px 12px;
        border-left: 5px solid #eee;
      }
      pre {
        padding: 12px 15px;
        font-size: 13px;
        line-height: 1.45;
        background: hsl(0,0%,97%);
        white-space: pre-wrap;
        border-radius: 3px;
        border: none;
        overflow: auto;
      }
    </style>
  </head>
  <body style="font-family:Calibri;font-size:11pt;;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
</body>
</html>

And this is the html-source we receive when we send emails WITH images embedded. (I also tested with different images and fresh stock images, so no, our specific images are not causing this):

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><body>

  
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style type="text/css">
      body {
        font-family:Calibri;font-size:11pt;
      }
      img {
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
      }
      a img {
        border: none;
      }
      table td {
        border-collapse: collapse;
      }
      table {
        border-collapse: collapse;
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
        border: none;
        table-layout: auto;
        display: block;
        width: 100%;
        overflow: auto;
        word-break: keep-all;
      }
      table,
      pre,
      blockquote {
        margin: 0 0 16px;
      }
      td, th {
        padding: 7px 12px;
      }
      th {
        font-weight: bold;
        text-align: center;
      }
      col {
        width: auto;
      }
      p {
        margin: 0;
      }
      code {
        border: none;
        background: hsl(0,0%,97%);
        white-space: pre-wrap;
      }
      blockquote {
        padding: 8px 12px;
        border-left: 5px solid #eee;
      }
      pre {
        padding: 12px 15px;
        font-size: 13px;
        line-height: 1.45;
        background: hsl(0,0%,97%);
        white-space: pre-wrap;
        border-radius: 3px;
        border: none;
        overflow: auto;
      }
    </style>
  
  <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&nbsp;</div>
<div>
<img style="width: 241px; max-width: 100%;" src="cid:14167.e78863b4-e982-4403-8e85-c3196de7bdbd@zammad.od.local" width="241"><br>
</div>
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>
</div>

</body>

The second output suddenly has an opening body-tag right after the first meta tag. As this is still within the html-head, of course this is breaking the html/css settings defined afterwards from taking effect. Why including an image would cause this is beyond me.

Again, we use Debian 11 (I mistyped in my first post, sorry!)
With Zammad v 6.3.1, installed via package.

Thank you for the patience you have with me.

zrotp

Hi @Merva. When you think it’s a bug, please open a bug report in GitHub and attach a test mail that we can use for reproducing the described issue.