Header images broken in Safari

The header images are rather horizontally challenged in Safari:

This appears to be a result of width: 60% applied to .category-logo.aspect-image img. If I manually disable that rule then it’s fine.

1 Like

Is this breaking in other browsers? I’m not sure why now it’s suddenly breaking on Safari, the rule should not do that :thinking:

All OK in Firefox 109.0 on Win 10

I’m presuming that’s on a Mac; on an iPhone running iOS 16 I don’t see that.

Looks broken in Firefox on Android as well:

2 Likes

I can confirm (“bolster,” really) everything said so far as true. In my Safari browser (version 16.2, associated with macOS Ventura 13.1), I thought it was a Safari problem, but it does appear to be attributable to the width: 60% directive.

I’ve removed the custom css for the images, since it seems now Discourse 3.0 theme decreases the category logos on mobile views, so this change in now redundant. It should fix the issue reported in this topic.

That does indeed seem to have fixed it. Thanks!

Very off-topic, but

gave me a good chuckle.

I would not consider it redundant as the original issue with the icon size was not solely or even primarily about mobile (and for me, the icons are about 5 times too large in mobile, so I’m not sure if there was any actual change to the appearance on mobile).

2 Likes