search

OfficeDev / office-js

A repo and NPM package for Office.js, corresponding to a copy of what gets published to the official "evergreen" Office.js CDN, at https://appsforoffice.microsoft.com/lib/1/hosted/office.js.
https://learn.microsoft.com/javascript/api/overview
Other
665 stars 94 forks source link

Styles stripped when using setSignatureAsync on Outlook Mobile #4685

Open bogdanst24 opened 1 month ago

bogdanst24 commented 1 month ago

Provide required information needed to triage your issue

Your Environment

Expected behavior

When using the setSignatureAsync function on Outlook Mobile (either iOS or Android), the used HTML is maintained in order to ensure consistency of the signature across devices. The same HTML should result in the same rendering regardless of the device the email is sent from or previewed on the recipient side (at least throughout Microsoft's products).

Current behavior

Multiple CSS styles are either modified or removed when using the function on Outlook Mobile. cellspacing and cellpadding on table elements are completely removed, This causes the emails sent from Outlook Mobile and received on Outlook Desktop to render inconsistently and incorrectly, as Outlook Desktop requires the 2 properties to be set. Alternatives for the 2 properties are not working, as they are also modified upon email send.

Original HTML to be inserted:

<table cellspacing="0" cellpadding="0" bgcolor="#05E560" width="615" height="130" role="presentation">
  <tr>
    <td width="615" height="130">Table text</td>
  </tr>
</table>

HTML after the email is sent:

<table width="615" height="130" style="background-color: rgb(5,229,96);">
    <tbody>
        <tr>
            <td width="615" height="130">Table text</td>
        </tr>
    </tbody>
</table>
AlexJerabek commented 1 month ago

Hi @bogdanst24,

Thanks for reporting this. @exextoc, could you please investigate?

kumarshrey-msft commented 1 month ago

@bogdanst24 Thanks for reporting this, it's a known issue that few HTML attributes are sanitized by Outlook Mobile's editor. In the meantime to get unblocked, can you try using CSS properties to achieve the desired style? The allowed HTML attributes and sanitized values of a few are documented here.

bogdanst24 commented 1 month ago

There are known CSS alternatives for cellspacing (using border-collapse:collapse) and cellpadding (using padding:0 on ), but they do not work on Outlook Desktop :(. A known issue as in a bug already in the backlog, or a known limitation?

kumarshrey-msft commented 1 month ago

We have noted your concern regarding CSS alternatives not working on Classic Outlook Desktop and are having internal discussion regarding the best developer experience here. However, the general guidance remains to prefer CSS over HTML attributes to avoid the editor sanitization which might happen across the other clients.

In the meantime, for this immediate issue, can you try using Office.Diagnostics to check for the platform and apply CSS or HTML attributes accordingly?

bogdanst24 commented 1 month ago

We would prefer not to start doing that, as it looks like the rendering engines and in general email client products are continuously changing. Also, there are no official guidelines on what and how to change. Doing it based on findings from the internet and some local testing is not a good thing for an enterprise product.