Header images broken in Safari

[Richard (Richard Fairhurst)]

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.

[nukeador (Rubén Martín)]

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

[Fizzie41]

@nukeador

Is this breaking in other browsers?

All OK in Firefox 109.0 on Win 10

[SomeoneElse (Andy Townsend)]

@Richard

The header images are rather horizontally challenged in Safari:

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

[Tordanik (Tobias Knerr)]

Looks broken in Firefox on Android as well:

[stevea]

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.

[nukeador (Rubén Martín)]

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.

[Richard (Richard Fairhurst)]

That does indeed seem to have fixed it. Thanks!

[habi (David Haberthür)]

Very off-topic, but

@Richard

rather horizontally challenged

gave me a good chuckle.

[Tordanik (Tobias Knerr)]

@nukeador

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.

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).