hteumeuleu / email-bugs

Email quirks and bugs
539 stars 20 forks source link

Outlook iOS clipping at 5000px #108

Open M-J-Robbins opened 2 years ago

M-J-Robbins commented 2 years ago

The Outlook app on iOS clips emails longer than 5000px.

This issue was mentioned on Twitter and Email Geeks Slack

I ran some tests and found that it clips at 5000px any content beyond that is clipped and a Read More... button is shown.

From my tests I saw this happening on Outlook app V4.2146.0 on iOS. Updated to 4.2205.0 and still see the same issue. Testing on Android Outlook app version 4.2203.2 there is no clipping. Testing on Android progressive web app, there is no clipping.

test code

<!DOCTYPE html>
<html lang="en" dir="ltr" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
  <meta name="x-apple-disable-message-reformatting">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <title>Outlook iOS clipping</title>
  <!--[if mso]>
  <noscript>
    <xml>
      <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
  </noscript>
  <![endif]-->
</head>
<body>
  <img src="https://dummyimage.com/250x4900/000/fff&text=4900" width="250" height="4900" style="display:block">
  <img src="https://dummyimage.com/250x50/333/fff&text=4950" width="250" height="50" style="display:block">
  <img src="https://dummyimage.com/250x50/333/fff&text=5000" width="250" height="50" style="display:block">
  <img src="https://dummyimage.com/250x50/333/fff&text=5050" width="250" height="50" style="display:block">
</body>
</html>