search

chromakode / react-html-email

Create elegant HTML email templates using React.
MIT License
896 stars 115 forks source link

[BUG] Default example kitchenSink.jsx does not display well in default Galaxy S6 email client. #67

Open kopax opened 5 years ago

kopax commented 5 years ago

Dear everyone,

I have tested with my Galaxy S6 edge default mail client and I was surprised to see that my template was not working well.

I have then tested with the default and found it to be a non working example:

image

The content does not display as in thunderbird:

image

I have reduced the amount of the example code and noticed that it was still present when I only have: 

<Email title="Test Email" headCSS={css}>
  <Span fontSize={15}>Hello, world!</Span>
</Email>

It generates the following HTML (from thunderbird sourcecode)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.=
org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang=3D"en" xmlns=3D"http://www.=
w3.org/1999/xhtml"><head><meta http-equiv=3D"Content-Type" =
content=3D"text/html; charset=3Dutf-8"/><meta name=3D"viewport" =
content=3D"width=3Ddevice-width, initial-scale=3D1.0"/><title>Test =
Email</title></head><body style=3D"width:100%;margin:0;padding:0;-webkit-te=
xt-size-adjust:100%;-ms-text-size-adjust:100%"><table width=3D"100%" =
height=3D"100%" cellPadding=3D"0" cellSpacing=3D"0" border=3D"0" =
align=3D"left" valign=3D"top"><tbody><tr><td align=3D"center" =
valign=3D"top"><table width=3D"600" align=3D"center" cellPadding=3D"0" =
cellSpacing=3D"0" border=3D"0" valign=3D"top"><tbody><span =
style=3D"font-family:sans-serif;font-size:15px;line-height:15px;color:#000"=
>Hello, world!</span></tbody></table></td></tr></tbody></table></body></htm=
l>

If I keep just the <Span> the text can display well

<Span fontSize={15}>Hello, world!</Span>

But then the source code looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.=
org/TR/xhtml1/DTD/xhtml1-strict.dtd"><span style=3D"font-family:sans-serif;=
font-size:15px;line-height:15px;color:#000">Hello, world!=
</span>

I also see this guys fixing height issues for some other mail client: https://github.com/impossibleventures/react-html-email/commit/bc24f3a02be2c20ab9a5768c117e986691d159cb

This package seems to not be ready for production, is anyone aware of this? How should we fix it?

kopax commented 5 years ago

Any update on this?

Dur anybody expérience issue with android mail client and the display of the example ?

kopax commented 4 years ago

Still no update on this ?

Can we at least tag it to

~bug /~bug /label bug

?