Header images broken in Safari

Richard · 2023-01-23T18:43:16.228Z

The header images are rather horizontally challenged in Safari:

Screenshot 2023-01-23 at 18.42.281510×558 40.4 KB

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 · 2023-01-23T19:21:48.895Z

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 · 2023-01-23T22:15:56.476Z

nukeador:

Is this breaking in other browsers?

All OK in Firefox 109.0 on Win 10

SomeoneElse · 2023-01-23T22:31:26.352Z

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 · 2023-01-23T22:52:30.616Z

Looks broken in Firefox on Android as well:

Screenshot1080×2160 244 KB

stevea · 2023-01-24T10:14:30.288Z

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 · 2023-01-25T09:28:53.069Z

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 · 2023-01-25T09:34:32.228Z

That does indeed seem to have fixed it. Thanks!

habi · 2023-01-25T11:18:17.234Z

Very off-topic, but

Richard:

rather horizontally challenged

gave me a good chuckle.

Tordanik · 2023-01-26T13:04:20.920Z

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