Summary

When a notification email sent about a comment containing an in-line image is opened in the desktop version of Outlook (2010 or 2016), the image is cropped and only the bottom part of it is loaded.

Note that:

• this issue only occurs with the Windows Desktop version of Outlook and not the web version of Outlook.
• this issue only occurs with JIRA Core Emails (and not with Service Desk Customer Emails which use a different template)

Steps to reproduce

• Install the Outlook app on a Windows server (for example Outlook 2010)
• Enable Outlook app to automatically download images from Trust Center Settings -> Automatic Download
• Log in JIRA in Internet Explorer (v11) with Remember me checked, so that Outlook app can use the cookie to authenticate against JIRA
• Trigger an email notification with a thumbnail attachment, then another email with a full image attachment
• Open the email notification in Outlook

Expected Results

The image from the comment is cropped and only the bottom part is loaded:

Actual Results

The full image from the comment should be loaded, like it's the case on the web version of Outlook:

Reason

We found from this forum that the reason why the cropping is happening with Outlook is because Outlook supports line-height specified in percents. For example, line-height: 20px isn't supported, but line-height: 110% is.

If we look into the source of an example of JIRA notification, we can see that the properties "line-height: 20px; mso-line-height-rule: exactly;" are used:

    <tr> 
        <td id="header-avatar-image-container" valign="top" style="padding: 0px; border-collapse: collapse; vertical-align: top; width: 32px; padding-right: 8px" width="32"> <img id="header-avatar-image" class="image_fix" src="http://www.gravatar.com/avatar/448a055777f24456a7b4cd6dc96561c7?d=mm&amp;s=48" height="32" width="32" border="0" style="border-radius: 3px; vertical-align: top"> </td> 
        <td id="header-text-container" valign="middle" style="padding: 0px; border-collapse: collapse; vertical-align: middle; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 1px"> <a class="user-hover" rel="mfilipan@gmail.com" id="email_mfilipan@gmail.com" href="http://localhost:8080/jira/secure/ViewProfile.jspa?name=XXXXXXXX" style="color:#3b73af;; color: #3b73af; text-decoration: none">XXXXX</a> <strong>commented</strong> on <a href="http://localhost:8080/jira/browse/TEST-7" style="color: #3b73af; text-decoration: none"><img src="cid:jira-generated-image-avatar-d40e1fa1-e19a-48e2-baca-e6b4147ecd1d" height="16" width="16" border="0" align="absmiddle" alt="Task"> TEST-7</a> </td> 
    </tr> 

Because the line-height properly is in px and not in percentage, the mso-line-height-rule is not properly interprated by Outlook and the image is cropped
To fix this issue, the CSS of the email template should:

• either set the line-height property with a percentage value (for example, changing "line-height: 20px; mso-line-height-rule: exactly;" to "line-height: 100%; mso-line-height-rule: exactly;" fixes the issue)
• or remove the properly mso-line-height-rule from the CSS if the line-height property can't be set to a percentage value

Workaround

No workarounds at the moment