Embedded images break layouts due to wrong dimensions
Originator: | winkelsdorf | ||
Number: | rdar://33564090 | Date Originated: | 07/27/2017 |
Status: | Resolved: | ||
Product: | 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
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!
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.