Header images broken in Safari

Richard · January 23, 2023, 6:43pm

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 · January 23, 2023, 7:21pm

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 · January 23, 2023, 10:15pm

All OK in Firefox 109.0 on Win 10

SomeoneElse · January 23, 2023, 10:31pm

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

Tordanik · January 23, 2023, 10:52pm

Looks broken in Firefox on Android as well:

stevea · January 24, 2023, 10:14am

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 · January 25, 2023, 9:28am

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 · January 25, 2023, 9:34am

That does indeed seem to have fixed it. Thanks!

habi · January 25, 2023, 11:18am

Very off-topic, but

gave me a good chuckle.

Tordanik · January 26, 2023, 1:04pm

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