Menu icon Foundation
Foundation for Emails 2.0 BUG - Retina Images on IE Break layout on small

When using retina images and testing on IE 10 / 11. I noticed that my layout was breaking (expanding beyond the boundries of the viewport).  When I removed all the images, this problem stopped happening. For example, in the header I'm using a 1160px image by 1400px image. I am using the height="700" width="580" attributes on the image. On all other browsers this doesn't seem to be an issue. On versions of outlook.com this doesn't seem to be an issue unless you click the view in browser link.  If you scale your window size passed the breakpoint, the layout breaks. 

I can't test how this works on a Windows phone, but I am assuming if someone uses the view in browser link and is using IE on a phone this will also happen.  Has this always been the case? Has anyone else experience this? 

You can also test this by using a retina image locally by using a large placehold.it graphic in your layout and adding the proportional height="" width="" attributes to the image tag. It will break with any foundation for emails 2 template on the site. 

(I've also posted this issue on GitHub)

https://github.com/zurb/foundation-emails/issues/447


UPDATE: I added a video on github of the issue. 

IEbugFFE2Foundation for Emails 2.0foundation for emailsFoundation Emails.

When using retina images and testing on IE 10 / 11. I noticed that my layout was breaking (expanding beyond the boundries of the viewport).  When I removed all the images, this problem stopped happening. For example, in the header I'm using a 1160px image by 1400px image. I am using the height="700" width="580" attributes on the image. On all other browsers this doesn't seem to be an issue. On versions of outlook.com this doesn't seem to be an issue unless you click the view in browser link.  If you scale your window size passed the breakpoint, the layout breaks. 

I can't test how this works on a Windows phone, but I am assuming if someone uses the view in browser link and is using IE on a phone this will also happen.  Has this always been the case? Has anyone else experience this? 

You can also test this by using a retina image locally by using a large placehold.it graphic in your layout and adding the proportional height="" width="" attributes to the image tag. It will break with any foundation for emails 2 template on the site. 

(I've also posted this issue on GitHub)

https://github.com/zurb/foundation-emails/issues/447


UPDATE: I added a video on github of the issue.