The Lastest Problem With Gmail – Pull Through Text and Images

Gmail was messing with the pull-through text.

Gmail runs everything through a preprocessor before it displays it, which renames all the classes (presumably to avoid it clashing with their own page classes) and also strips out a bunch of CSS properties that they’ve decided people can’t use for reasons unknown. It looks like Gmail have changed how their preprocessor rewrites the email HTML and it’s now stripping out some CSS that ensures that full-width images on mobile are the whole width of the page. The result is that images smaller than the page width are too small, and images larger than the page width are ‘leaking’ out of the side of the image frame.

With a bit more investigating, there seem to be two things going on here.

1. Gmail desktop (where I test the resulting processed message) reports the screen width wrong. The CSS media queries are all set to @media screen and (max-width: 600px) but if you set the Gmail window to less than 600 pixels, the bit that triggers the mobile stacking at <600px is triggering, but the bit makes the images’ size isn’t. A bit of manual fiddling with the numbers shows that it thinks the page is 1000px wide.

Not a huge issue though, unless anyone is looking at Gmail desktop on a weirdly thin screen. It does make it harder for me to test stuff though.

2. Certain versions of the Gmail app on mobile are flat-out ignoring some of the media queries. I’ve tried manually increasing the trigger width and it doesn’t do anything. It definitely used to work on all the previews so this may be new behaviour (ie Google have changed something) or it may be that they’ve always done it and Email On Acid have only recently added those devices so we’ve only just noticed.

Other than that, they’re very specific (and significantly, not the latest) devices – eg Google Pixel 6 running on Android 12 does it, but Google Pixel 7 is fine – so we could just remove those devices from the preview list?