Category logo image overlaid by text after recent update

After a recent update (sometime in the last few weeks), all category images are now overlaid with text. The site is running 2.9.0 beta 10 and uses the vanilla theme, no plugins.

This happens across devices, example below:

Sometimes the overlap includes a thread title or two. I can’t link the site here as it’s only visible to subscribed members.

There have been a few reports of this recently, and I think it’s to do with the new dark/light category logo feature. There were a couple of suggested fixes in this topic:

1 Like

Hello,

There was some updates on this section these days. FIX: set width on category logo img, not container (#18676) · discourse/discourse@ab217d8 · GitHub and FIX: set max-width on category logo img (#18703) · discourse/discourse@c937b6d · GitHub

Can you try to update your site? That should probably fix this. :slightly_smiling_face:

1 Like

I did update to latest 2.9.0 beta 10. Should that have fixed this? I updated from the UI.

That fixes landscape category images we have, but not portrait ones. The portrait is sized 638 X 1024 which doesn’t seem big in this day & age :slightly_frowning_face:

1 Like

Sorry maybe I misunderstood this

These updates came 1-2days ago. So your Discourse version probably not contains if you updated few weeks ago.


Can you share your site url to check this if it’s public? :slightly_smiling_face:

The issue occurred recently but the site is up to date. It isn’t public.

1 Like

You can also copy and paste your exact version number from your dashboard if you can’t share a link. :+1:

Untitled

2 Likes
2 Likes

It does seem like you have those fixes in there. There is perhaps a case where width has been accounted for but not height. :thinking: It’s the weekend for most of the Team, but I can see @dodesz typing so hopefully he can magic up a community fix in the interim. :crossed_fingers: :slight_smile:

1 Like

Can you try it in safe mode? I can’t repro it unfortunately on my test site. My best tip without seeing it there is a custom code from a component which cause it.

1 Like

No change with safe mode . The site is vanilla, except for a couple of social login plugins.

@Amicable I can’t repro this either. I took a screenshot of your image and uploaded it to a local category, and the layout is fine:

What are the dimensions of your original image?

I see your posted image was 638x1024, the one I used is 770x1144, so very similar.

Maybe try another rebuild? If that doesn’t work, can you share the full list of plugins you are using? It’s possible that one of those plugins is overriding the category template, and that could likely conflict with the updated styles in core.

Maybe it’s to do with upgrading via the web interface. I’ve had this before on CSS issues. Maybe old stylesheets are persisting again?

The only plugin I have running is the docker manager.

I’m again away and can’t do the upgrade at the server until I return later in the week. A web UI upgrade today isn’t clearing the issue.

It’s maybe worth my restating that the CSS fix for landscape category images has been applied and works.

1 Like

I’ve added a line in the css component fix to deal with portrait category images. So the category image CSS component now looks like this:

@supports (--custom: property) {
  body .category-logo.aspect-image {
    max-width: 150px;
    max-height: 300px;
  }
}

This temporarily fixes my issue, although what remains is the wider problem of stylesheets persisting when upgrading using the web UI.

@pmusaraj if you tell me what part of the CSS to inspect to verify this odd behaviour, I’ll report back. I can also offer a login via DM, which you’ve had before.