New CSS to fix Chrome breaking old CSS (image size/aspect ratio)

Last week I had several clients report to me that their websites were suddenly displaying images at the wrong size — too small. I checked their sites (in Safari, my default browser), and everything looked fine.

Then I realized, it was a bug in the new version of Chrome. (At least, it seems like a bug to me, when CSS code I’ve been using consistently for over a decade suddenly doesn’t render properly in just one browser, right after that browser has been updated.)

Here’s the code I had been using:

img {
  height: auto;
  width: auto;
  max-width: 100%;
}

I discovered that by just removing the width: auto; line, the images rendered at the intended size, and this didn’t seem to break anything in other browsers either. Sweet!

Unfortunately today I had a client contact me with what I initially thought was the same issue. But then they said it was affecting Firefox and Edge as well. (Windows user!) Sure enough it’s also a problem in Safari.

But this time, it’s not that the images are rendering too small; it’s that they’re getting stretched and distorted. Then I realized I had already applied my fix for that client’s site, and it was causing this new issue.

Fortunately there’s another simple CSS fix. (I briefly considered the aspect-ratio property, but that’s not flexible enough for what I’m trying to do.) It’s a newer CSS property that I haven’t used much: object-fit.

It’s really quite simple though. Here’s the new code I’m using that seems to resolve the issue completely. But I suppose I’ll get another email from someone next week describing another edge case where it doesn’t work. Stay tuned…

img {
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

Update (11/21/2024): OK, so maybe as with the PNG-to-HEIC-to-JPEG glitch, this was actually more of a WordPress 6.7 issue. By the way, I reported the PNG glitch and it got patched in 6.7.1, as did this issue… assuming it’s the same issue I’m describing here, which kind of sounds like it. In retrospect it does seem kind of odd that Chrome and WordPress would both introduce image-related issues on the same day. Much more likely that WordPress introduced multiple issues — or, well, maybe just revealed browser issues, but still. Gotta blame someone.

Get Gmail to scale inline images to fit the browser window (in Chrome and Safari)

If you use Gmail on the web as your main email platform, and your work often involves people sending you emails with large high-resolution images (which ideally would be attachments, but are often embedded inline in the message), you know this problem. The images are frigging huge in the browser window, and the viewing panel ends up with a horizontal scrollbar, with paragraph text trailing off the screen. Having to scroll horizontally to read emails is really awkward and irritating! Why doesn’t Gmail at least offer an option to auto-scale inline images to fit the width of the window?

I discovered there’s a Chrome extension to fix this. If you’re a Chrome user, just download it and you’re done.

But I don’t use Chrome, I use Safari. And there doesn’t appear to be an equivalent Safari extension. I did, however, continue down the trail to the CSS file in the GitHub project for that Chrome extension. The CSS is quite simple:

[data-message-id] > div:nth-child(2) img:not([role=button]):not([role=menu]):not([width]) {
max-width: 100%;
width: auto !important;
height: auto !important;
}

That’s all it takes to get Gmail to shrink inline images in an email to fit the window. But how do you get Safari to apply that CSS? This is not so hard, either.

First, save the above CSS code into a file, maybe called gmail.css so you’ll remember what it’s for, and save it somewhere that makes sense to you, such as your Documents folder.

Next, open the Safari preferences, and click on the Advanced tab.

Click on the Style sheet dropdown and navigate to the gmail.css file you saved. That’s it! If you have a Gmail message containing a huge image open in Safari while you’re doing this, you should immediately notice the image pop down to a reasonable size. Huzzah!

The historical basis for vote distribution in this year’s election goes back farther than I thought… by several million years

I’ve been examining maps on my own and also reading commentary on voting patterns in the southern United States this year, most of which reaffirmed some not-too-surprising facts:

  • African-Americans voted overwhelmingly in favor of Barack Obama
  • White voters voted substantially less for Obama than did African-American voters
  • Racism played a role in some voters’ decision, at least to the extent that some white McCain voters would not support Obama due to his race

As a result of these and other facts, some correlated, some not, some distinctive maps of voting patterns have emerged. One I found interesting (which I will add to this page if I can locate it) showed that while almost the entire country voted more Democratic than in 2004, there was a band through the Middle South stretching from West Virginia to Oklahoma that moved towards the Republicans.

But within the mostly “red” region of the South, there also was a smaller “Blue” band that went for Obama. And here we’re referring to actual percentages, not changes with respect to 2004 voting patterns.

Again, not a terribly big surprise. Population distribution of African-Americans is not even throughout the South; blacks tend to live predominantly in areas where cotton plantations existed during the pre-Civil War era. So, looking back into history a few hundred years, we can see that patterns of plantation distribution and the profoundly regrettable history of slavery contributed directly to the distribution of voting patterns in the 2008 election.

But it goes back a lot farther than that. Why were plantations distributed as they were? Well, that comes back to the soil — a “fertile crescent” of deep black soil through that region. And why does that soil exist as it does, in that particular configuration? This question takes us all the way back to the location of the Atlantic coastline during the Cretaceous Period, 85 million years ago. For a deeper explanation, read on.

The Obama-Biden Transition Project

This is something that I think is big news, but so far I’ve heard nothing about it in the “News.”

In the words of Obama’s campaign manager, David Plouffe, from an email I received today:

The Obama-Biden Transition Project is a nonpartisan entity whose purpose is to facilitate the transition to a new government and prepare for the next administration.

In the past, efforts like these have often been very secretive and funded by the D.C. lobbying and corporate community.

But, like in the campaign, we’ve decided to do things differently.

For the first time, transition efforts won’t be financed with donations from Washington lobbyists and PACs — which means we’ll need to keep asking for your help. Your generosity during the campaign helped get us here, but building a more transparent and open government means continuing to rely on a broader group of people to do this the right way.

That’s cool, I think, and also significant. I made several donations to the campaign over the course of the year, and I’ve made a donation to the transition project, too. Donating money is the lazy way to get involved, of course, but at least it’s something. I really believe Barack Obama is committed to doing politics differently, and I believe he has the brains and the vision to make it happen. If you agree with me, here’s how you can help.

(P.S. Yes, they got Copeland to play drums.)

Fear of a Blank Planet

No, I’m not referring to the most recent Porcupine Tree album (although I do highly recommend it). I am referring to my rather strange phobia.

This fear — well, not really so much a fear as just a source of inexplicable anxiety — is something that’s been with me for so long (and is so inconsequential most of the time) that I scarcely think about it, and even more scarcely ever think about how weird it is. But today in conversation with a couple of co-workers, I happened to mention it for some reason, and I really think they thought I was nuts.

So what is this phobia of mine? I’m afraid of blank spaces on maps. What does this mean exactly? It means that studying a map, and letting my eyes drift off into an unmarked void (or even worse, scrolling Google Maps to a point where recognizable features disappear) freaks the shit out of me. It’s even worse when I have Google Maps in aerial view, and I scroll off into open water, or God forbid, zoom in to a level where they don’t have any photos. (And don’t even talk to me about the cheese on Google Moon!) I’m immediately overcome with a visceral agitation at the site of, well… nothing, and I have to scroll the map back to civilization (or at least non-nothingness) or close the window immediately.

I searched for any sign online of anyone else with this particular quirk, but came up empty. The promising term “cartophobia” turned out to refer to the much more mundane (and much more understandable, I suppose) “fear” of maps in the sense that a person is intimidated by maps and doesn’t understand how to read them. My problem, I think, is precisely the opposite: I love maps and can study their minutiae in detail for hours. And I think that is exactly why “voids” on the maps freak me out so much… it’s like stepping into non-existence.

Although I don’t know the date, I can pinpoint the first moment in my life when I was struck by this fear: I was probably around 10 or 11, and my parents had gotten me a large poster-sized map of the world, for which I was quite grateful. I enthusiastically unrolled it and began examining it in detail. After what was probably several hours, I got ready to put it away, and then I made that most dreadful mistake: I looked at the blank reverse side. It’s nearly impossible to convey this in a way that doesn’t sound completely stupid, or that effectively communicates the apocalyptic panic that ensued. It really felt like I was staring right into the heart of nothingness, like the universe didn’t exist.

Certainly this phobia of mine is a minor inconvenience at best. It is not incapacitating in any way. As I said, I rarely think of it, and although I think I’ve talked to SLP about it, this is probably the first time I’ve ever mentioned it to anyone else in my entire life. But still, it’s real. And still, I wonder if anyone else has ever experienced it.

Update (September 1, 2021): Uhh… this…