search

hteumeuleu / email-bugs

Email quirks and bugs
535 stars 20 forks source link

Samsung not responsive when width attribute used in template #73

Open M-J-Robbins opened 4 years ago

M-J-Robbins commented 4 years ago

If you use a width attribute in a email template, perhaps in a table <table width="600"> or image <img width="600"> that sets a width wider than the viewport, Samsung will make the email that width.

It adds an inline width to the <body> elements of width:600px and the same to the wrapping <div> element that Samsung include. These can be identified as #MessageViewBody and #MessageWebViewDiv. These can be overridden with our CSS but now they are also adding a meta tag <meta id="meta-viewport" name="viewport" content="width=686" contenteditable="false">

This meta tag cannot be overridden that I have found so far.

The only way I have found so far to avoid this is to not use width attribute and only style with CSS widths. However this can potentially create issue for Outlook on windows.

M-J-Robbins commented 4 years ago

I have tried using CSS viewport to override the issue but no luck so far 

 @viewport {
  min-width: 300px;
  max-width: 400px;
}
JayOram commented 4 years ago

This is due to the new (I think) 'Auto fit content' checkbox on Samsung mail. With it turned off, emails render as you would expect.

Screenshot_20191204-221446_Email

M-J-Robbins commented 4 years ago

Ah yeah cheers @JayOram

In that case this can be put down to a bug in their auto fit logic. Currently it seems to only be looking at width attributes, it should maybe also consider media queries.

kris2914 commented 4 years ago

Tested this on the Samsung mail app yesterday and it's 100% affecting the appearance of the email. With it switched off, the email looked exactly how I wanted it to, however when it was switched on, it was making the width of the email too wide but still behaving responsively, so it was almost like a hybrid of a desktop/mobile email. Has anyone got any ideas on how to bypass this feature?

CrocodileInAWhileAlligatorLater commented 4 years ago

I agree with @M-J-Robbins this kind of thing shouldn't be happening. Samsung has bad enough rep with all the bloatware they install and unwanted samsung apps.

We don't need another internet explorer / outlook Samsung. Thanks.

husseinalhammad commented 3 years ago

I reported this on the Samsung Developers Forums (https://forum.developer.samsung.com/t/samsung-email-auto-fit-content-feature-ignores-css/11418).

tdefossezbadsender commented 2 years ago

@M-J-Robbins I'm not sure, but when I insert my email (which is for example 600px wide) in a 100% wide table, I have the responsive version displayed. Could you tell me if it works for you too?

M-J-Robbins commented 2 years ago

@tdefossezbadsender do you have a small code sample of what you mean?

tdefossezbadsender commented 2 years ago

@M-J-Robbins Well, instead of using this:

<table style="width:600px; margin:0px auto;" align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><!-- email content --></td>
  </tr>
</table>

try to use this:

<table style="width:100%;" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table style="width:600px; margin:0px auto;" align="center" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><!-- email content --></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
husseinalhammad commented 2 years ago

@tdefossezbadsender The problem is Samsung Email (when the "auto fit content" feature is turned on) over-relies on the width tag attribute (regardless of the value of the width CSS property) to determine whether it needs to "shrink email content to fit the screen".

So we're not talking about:

<table style="width:600px;"></table>

But about:

<table width="600" style="width:100%;"></table>

And the same goes for img tags as it is good practice to set the width and height attributes:

<img src="https://via.placeholder.com/1200x675/FF0000/FFFFFF.png" alt="" width="1200" height="675" style="width:100%; height:auto;" />
tdefossezbadsender commented 2 years ago

@M-J-Robbins you confirm that I'm off-topic? Or have you tried what I'm proposing?

M-J-Robbins commented 2 years ago

@tdefossezbadsender Yeah I'm still seeing the same issue with that code

TaxiTweedy commented 2 years ago

@M-J-Robbins I've been chatting with @JayOram this morning as I'm having the exact same issue (but even with auto fit disabled, it shows desktop with a horizontal bar).

In Litmus, removing the old Samsung hack seems to have better rendering ` #MessageViewBody,

MessageWebViewDiv {

  width: 100% !important;
}`

But only Samsung Mail (Android 7) is available to test in Litmus so i don't trust it yet. We're trying to sort a live device to test on and will report back!

M-J-Robbins commented 2 years ago

@TaxiTweedy ah interesting. I've just retested this morning on Samsung S21, Android 12, Email 6.1.61.1 Still seeing the same as before width="600" will add the meta viewport when autofit is on.
When it's off it works as expected.

#MessageViewBody, #MessageWebViewDiv { width: 100% !important; } doesn't appear to be making any difference on my very minimal test.

Let me know if you want a hand testing it, either share a code sample here or DM me some code and I can test it on my device.

TaxiTweedy commented 2 years ago

After some further testing, it looks like I was led down a rabbit hole.

As @M-J-Robbins mentions above, removing #MessageViewBody, #MessageWebViewDiv { width: 100% !important; } makes no difference when width="600" is present.

achau88 commented 2 years ago

If you add additional css specific to the above IDs, your email should work on Samsung Mail

e.g.

MessageViewBody .full_width {width:100% !important; height:auto !important; max-width:100% !important; min-width:100% !important;}

MessageWebViewDiv .full_width {width:100% !important; height:auto !important; max-width:100% !important; min-width:100% !important;}

Any media queries you have just add into the styles like the above and this should override any issues with autofit being enabled

TaxiTweedy commented 2 years ago

@achau88 does this also work on tables that have had a width="600" attribute set on them (not a style="width:600px;")

Will try and give that a go later

ebynum14 commented 1 year ago

We recently ran into this issue as well. We only use width=“600” on images for Outlook along side style=“width:100%;max-width:600px;” for everything else. I’ve not been able to get @achau88 ’s solution to work, but preliminary tests show that “hacking it” by putting width=“auto” width=“600” on the image overrides the auto fit issue.

bago commented 1 year ago

I guess I found a workaround: https://mosaico.io/email-client-tricks/samsung-email-autowidth-breaks-repositivity/

If you don't want to read the whole story, here is the workaround:

 @media screen and (max-width: 384px) {
    .mail-message-content {
      width: 414px !important;
    }
  }

It is not a 100% fix, as it will use a 400+px wide viewport (a bit larger than the 360px usually used in other mobile apps), but it works much better.

M-J-Robbins commented 11 months ago

Finally got around to getting a Samsung test device after I had to return my old one and tested this fix. It's working great for me thanks @bago

One interesting thing I also noticed is that this works well for my @gmail.com address. But when using my Microsoft @live.com address has a different issue, it doesn't appear to render media queries at all.

Also I think it's doing some auto scaling by pushing up the font size, maybe with a text-size-adjust because when I'm using em units everything looks good. But using with px it's not great

These examples have a few differences, they were from an old presentation showing different coding methods

Em units

Email using em units, everything scales up well

PX units

Email using px units, everything if still render as if it were 600px