Embedded images break layouts due to wrong dimensions

Originator:winkelsdorf
Number:rdar://33564090 Date Originated:07/27/2017
Status: Resolved:
Product:Mail Product Version:10.3 (3273)
Classification:Bug Reproducible:Always
 
Summary:
When embedding images via `cid` received via an Apple Mail Client, the images break layouts in small preview panes when the image is larger then what is actually displayed (a.k.a. Retina Images which are twice the size of the display dimensions).

When serving images remotely, this does not occur.

Please see screenshots attach to my StackOverflow Post where I provide a simplified example, too:

https://stackoverflow.com/questions/45347978/bug-in-apple-mails-embedded-retina-image-handling-or-my-source

Steps to Reproduce:
Send a mail with embedded images e.g. 500x50px which are going to be display at 250x25px (via css). When the preview pane is smaller than 500x50px the layout is broken when the image is embedded, as Apple Mail still uses the real dimension to calculate the layout instead of the display dimensions.

Expected Results:
No display differenced between embedded and remotely served images.

Observed Results:
The layout is broken, i.e. the image overflows the surrounding table.

Version:
10.12.6

Comments

Problem still persists in macOS Catalina and Mail 13.4

I think I'm facing the same issue in Mail Version 13.4 (3608.80.23.2.2) on macOS Catalina 10.15.4 (19E287).

Here is a screenshot of an email that uses an embedded GIF to display a purple arrow.

https://user-images.githubusercontent.com/198988/82755471-fb6b6080-9dd3-11ea-81b9-b7c098628727.png

As in OPs case, this embedded arrow GIF also has quite a width of 1800px so it can be scaled down with CSS. As you can see the image unexpectedly overflows its parent container to the left.

If however I link the image from an external URL instead of embedding it, the layout comes out correctly:

https://user-images.githubusercontent.com/198988/82755558-92381d00-9dd4-11ea-9c27-6ec255c4bfb3.png

I too have noticed that if I keep increasing the Mail window width enough, probably so that Mail thinks its viewport is now large enough to fit the arrow GIF, the embedded image snaps in place. For this particular email and GIF, this happens at a window width of 3600px.

By davidknezic at May 24, 2020, 1:44 p.m. (reply...)

Please note: Reports posted here will not necessarily be seen by Apple. All problems should be submitted at bugreport.apple.com before they are posted here. Please only post information for Radars that you have filed yourself, and please do not include Apple confidential information in your posts. Thank you!