Category Archives: Computers & Technology

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.

Safari vs. WordPress 6.7 Block Editor: Who’s to blame for forced PNG-to-HEIC conversion?

Look at this image:


Now look at this one:


What if I told you those were the same image? Well… I mean… they’re not. Obviously. But they’re supposed to be. They were both the same image when they were on my computer. The same exact file. But I uploaded them to this page in two slightly different ways, and that made all the difference.

The one on top — the screwed-up one — I placed by inserting an Image block in the WordPress Block Editor, and then clicking the Upload button in that block, navigating my hard drive, and locating the image. The one on the bottom, I placed by again inserting an Image block, but this time I just dragged the image from a Finder window into the Safari window. WordPress supports drag-and-drop uploads.

Looking “under the hood,” I discovered that the file on top was somehow getting converted to Apple’s “High Efficiency Image Format,” HEIC (the reason for the C instead of an F is something I’ll leave to the Apple podcasters). WordPress just added HEIC support in version 6.7, which was released this week. Since browsers (other than Safari, I assume) can’t display HEIC images, WordPress automatically converts uploaded HEIC files to JPEG. And that’s why these two images look different. JPEG doesn’t support transparency, so the areas that were transparent in the original PNG got flooded with the nearest available colors1.

But, why should the results of these two upload processes be any different?

Well, after starting in the WordPress Support Forums and then moving over to the Make WordPress Core Trac and finally searching until I stumbled upon a year-old, barely active thread on the Apple Developer Forums, I discovered that Safari has a bug — I mean it has to be a bug, right? — where, if a file upload input field says it accepts HEIC format, Safari automatically converts the uploaded file to that format, apparently with no option not to do that. (I looked around all of the settings, even the developer ones, and didn’t see anything about this “feature” at all.)

And sure enough, WordPress 6.7 is a bit haphazard with its “support” of HEIC uploads, which made it easier to confirm the cause. There are two ways, generally speaking, that WordPress handles file uploads: the browser upload, via an <input type="file"> HTML field, and a JavaScript/AJAX/React/whatever drag-and-drop option.

The <input type="file"> field in the Image block of the Block Editor has added HEIC support via the accept="image/heic" attribute. But the input field in the old school Media Library upload page has not been similarly updated. (It’s become a fact of life in the WordPress world that most of the core team’s attention is on Block Editor stuff these days, and older features get ignored.) Uploading images in the Media Library does not do the conversion. Likewise, whatever exactly is going on with the drag-and-drop method also does not involve the accept="image/heic" attribute that causes Safari to do its mischief.

Unfortunately, it looks like the only “solution” at this point would be for WordPress to do a browser sniff and remove the accept="image/heic" attribute if the browser is Safari. The only reason that was explicitly added was to get Chrome to support HEIC uploads; as I understand it, Safari would support them regardless, but explicitly declaring HEIC support is apparently what triggers Safari to make the conversion.

So, practically speaking, Safari users who want to upload PNGs to their WordPress sites just need to be sure to only upload via drag-and-drop, or the Media Library.

(I haven’t tested, but I suspect JPEG uploads are likewise getting converted to HEIC and then back to JPEG, which probably results in a reduction of image quality.)

Side note on how I discovered this in the first place: Two days ago I was writing another blog post somewhat critical of Apple, and I found when I was trying to upload a screenshot of a window from my Mac — Mac screenshots are saved as transparent PNGs — the transparency was turning black. I was so driven to distraction over the situation that I barely managed to finish writing the post.

1 Saying those areas are flooded with color is an oversimplification. It looks like the color of each pixel is being determined consistently with how PNG compression works.

Is Apple ever going to properly address the inevitable, relentless growth of peoples Photos libraries?

I just got a new MacBook Pro with an M4 Pro chip, to replace my 3-year-old MacBook Pro with an M1 Pro chip. That older machine was fine, but, well… something in my gut just told me that if I was considering dropping two grand (minus some trade-in value) on a new computer manufactured in China, maybe I should do it before the end of 2024.

Anyway… I have the new MacBook Pro, and it’s pretty great. It’s essentially this year’s version of the same machine it’s replacing. The off-the-shelf model with a 14-inch display and a 512 GB SSD, at the same retail price. The upgrades are all in the Apple Silicon SoC: M4 Pro in place of the M1 Pro, with more cores and 50% more memory. A worthy upgrade to an already solid configuration.

I say “solid” because… well, I’d really like to have more disk space. I do a lot of video editing these days, and that requires a lot of storage. The problem is, Apple charges a ludicrous markup for increased disk capacity. And since external SSDs over Thunderbolt 5 are as fast as internal SSDs, I can get a 4 TB external disk for not much more than a meager 512 GB upgrade to Apple’s internal disk. The choice is obvious, even when weighing the convenience factor.

Which finally gets me (almost) to my point. Last night, after I had everything set up on the new Mac (I chose to manually install apps and copy files, so I could control what did and didn’t get moved over from the old Mac), I had over 300 GB of disk space free. This morning I sat down and was surprised to see I only had 180 GB free. What gives?

Well… what gives is the Photos app. I hadn’t even opened it — on purpose, for the exact reason I’m about to describe — but since I had logged into my iCloud account, the Mac “conveniently” automatically downloaded my entire Photos library from iCloud onto the Mac.

Do not want.

On my previous Mac, I had long since shuffled the Photos library off to an external disk. Honestly I never even really use Photos on my Mac, partly because my library is an unwieldy, 120 GB mess of close to 57,000 images1. But mostly because Apple gives users (almost) no control over how the files are managed on their Macs:

So, basically, you have three options:

  1. Fill up all of the space on your hard drive with your photo library.
  2. Fill up all of the space on your hard drive with your photo library, until your Mac decides you’re running out of space, then let it decide how much space to free up.
  3. Don’t have your photos on your Mac at all.

The default is #2, but it’s a pretty crappy option. Because for your Mac to know how much disk space to keep free, it needs to know how you intend to use it. If I’m not currently working on a video project, I don’t need much space. But if I am, then I can go from needing next to nothing to suddenly needing 200 GB or more of free space. Which means I always want to keep at least 200 GB free, in case I’m about to start on a video project. Once I’m rolling, I don’t want to be distracted with figuring out how to free up space.

Now here’s a twist: since, as I mentioned, external SSDs over Thunderbolt are essentially as fast as an internal SSD, you can easily edit a Final Cut project directly on an external disk. In fact, I do that a lot. But not always. I still want that free space.

Fortunately, Apple does provide a way to put your Photos library on an external disk. It’s easy and it works. But you shouldn’t have to do that.

The thing that really kills me is that it would be so simple for Apple to resolve this issue. All they’d need to do is add a slider to the settings tab from the screenshot above, letting the user set a minimum amount of disk space they want to keep free. Why doesn’t Apple do this? I feel like there’s a very intentional reason. And I think I’d be exasperated if I knew it.

1 Apple is really to blame for the mushrooming library, too. Their automatic tagging by date and location, and AI-assisted tagging of subjects like individual people, pets, etc., make it so easy to find specific images that there is no incentive to put any effort into culling the junk from your library. Growing libraries lead you to pay for larger iCloud storage allocations to hold them. There’s a reason “Services” is Apple’s fastest growing revenue segment. But all of that aside — whatever, I really am not bothered by it — the one place Apple is completely shitting the bed on all of this is handling on-device storage.

Don’t underestimate the value of “pissing in the ocean”

I usually agree with John Gruber. Usually. Not always.

Like many, I was outraged this week when word got out that Jeff Bezos killed the Washington Post’s planned endorsement of Kamala Harris.

I am not and have never been a Washington Post subscriber, so I couldn’t cancel my subscription in protest. I was, however, an Amazon Prime subscriber. So I canceled that instead. (Even before that action was suggested by The Atlantic.)

Gruber says that canceling your Prime subscription over this is “like pissing in the ocean.” Which, eww. But also, yeah, so?

Perhaps I should clarify.

I know canceling my Amazon Prime subscription isn’t really going to hurt Amazon. And it’s even less going to hurt Jeff Bezos, even though I would point out that while he’s no longer the CEO of the company, he’s still the chairman of the board and largest shareholder. But let’s be real. There is absolutely nothing I am personally capable of that would have the slightest impact on Jeff Bezos.

Gruber does go on to say:

If you feel better personally cancelling your Prime membership, do it. But don’t think for a second it will matter one iota to Amazon’s bottom line.

Yes, exactly. I didn’t do it because I thought it would affect Amazon’s bottom line. I did it because this was the final straw for my willingness to participate in the retail world Amazon has created. I’ve been conflicted over using Amazon for years, but I still did because it was so convenient. Not having Amazon Prime makes it less convenient, so I’ll spend less (hopefully nothing) with them in the future. That’s not going to hurt Amazon. But it’s going to help me, to know that I’m opting out of participation in a system with which I fundamentally disagree.

As it happens, I also owned a bit of Amazon stock. A very small bit. Three shares, to be precise. I sold those this week as well. (Some portion of my retirement is tied up in mutual funds which I also know for certain are partially invested in Amazon. There’s only so much a person can do.)

I’m generally not one to engage in boycotts or other forms of protest, because I don’t think they do much good. They rarely get the message across to the intended target, and only cause disruption for innocent people caught in the middle. In some ways that may be the case here. But I doubt any Amazon delivery drivers or warehouse workers are going to need to be laid off just because I’ve stopped shopping there. I mean, I bought a lot of stuff from Amazon over the years, but not that much.

Ultimately, your individual actions are more about your own life than anyone or anything else. Do the things that matter to you, and try to avoid participating in things you disagree with. That’s all you can really do… unless you’re a megalomaniac.

After all… if you gotta go, you gotta go.