Newsletters created GrapesJS HTML produce white borders on iOS / Mobile

Hello everyone,

During testing of a GrapesJS template I noticed an issue with rendering the email on iOS Devices and potentially other devices. To illustrate the problem I uploaded to screenshots of an email sent with a Mosaico template and another sent with the exported code of the Mosaico template imported to GrapesJS.

While the displaying width of the Mosaico email is correct the one of the GrapesJS has unused white space on both sides.

Good (Mosaico)	Bad (GrapesJS HTML)

While at first I was convinced that I had been doing something wrong, seeing that Mosaico works fine and GrapesJS doesn't changed my mind.

After further investigation I noticed that when importing a template in GrapesJS, GrapesJS will move around some <meta> tags, add new inline styles to the code and insert media queries, which result in layout changes to the final template.

This is a example of a simple import:

Before Import

<!doctype html>
<html>
    <head>
        <meta name="x-apple-disable-message-reformatting">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="UTF-8">
    </head>

    <body>
            <table>
            <tbody>
                <tr>
                    <td>
                        <table>
                            <tr>
                                <th>Firstname</th>
                                <th>Lastname</th>
                                <th>Age</th>
                              </tr>
                              <tr>
                                <td>Jill</td>
                                <td>Smith</td>
                                <td>50</td>
                              </tr>
                              <tr>
                                <td>Eve</td>
                                <td>Jackson</td>
                                <td>94</td>
                              </tr>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

After Import

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <meta name="x-apple-disable-message-reformatting">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge"><meta charset="UTF-8">
        <table style="box-sizing: border-box; border-collapse: collapse;">
            <tbody style="box-sizing: border-box;">
                <tr style="box-sizing: border-box;">
                    <td style="box-sizing: border-box; border-collapse: collapse;">
                        <table style="box-sizing: border-box; border-collapse: collapse;">
                            <tbody style="box-sizing: border-box;">
                                <tr style="box-sizing: border-box;">    
                                    <th style="box-sizing: border-box;">Firstname</th>
                                    <th style="box-sizing: border-box;">Lastname</th>
                                    <th style="box-sizing: border-box;">Age</th>
                                </tr>
                                <tr style="box-sizing: border-box;">
                                    <td style="box-sizing: border-box; border-collapse: collapse;">Jill</td>
                                    <td style="box-sizing: border-box; border-collapse: collapse;">Smith</td>
                                    <td style="box-sizing: border-box; border-collapse: collapse;">50</td>
                                </tr>
                                <tr style="box-sizing: border-box;">
                                    <td style="box-sizing: border-box; border-collapse: collapse;">Eve</td>
                                    <td style="box-sizing: border-box; border-collapse: collapse;">Jackson</td>
                                    <td style="box-sizing: border-box; border-collapse: collapse;">94</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>                                
    <style>
        @media only screen and (max-width: 480px) {
      table.full-width-mobile {
        width: 100% !important;
      }

      td.full-width-mobile {
        width: auto !important;
      }
    }
    </style>
    </body>
</html>

This is the default behavior of the GrapesJS Newsletter preset but it is not suitable for mobile devices. I found a possible solution in the GrapesJS Repo: Issue #73

What can the maintainers say to this problem? Was this something you have already been aware of?

Mailtrain-org / mailtrain

Newsletters created GrapesJS HTML produce white borders on iOS / Mobile #973