Avatar (initials only) in AppBar rendering improperly in Safari

[fnimick]

Current Behavior

Adding an with initials rather than image (which was fixed in #2333) causes the bar contents to render in the vertical center of the viewport.

The issue is the h-full class which was removed for image avatars, but not removed for text avatars.

See also: #2055

Expected Behavior

No response

Steps To Reproduce

No response

Link to Reproduction / Stackblitz

No response

More Information

No response

[endigo9740]

Hey @fnimick, sorry for the delay on this one. Can you confirm if the issue is still present? I'm unable to replicate:

I tested both with the src and initials, but neither cause the old issue to occur for me.

Note the version of Safari I'm running is listed in the screenshot. Safari versions are tied to the version of MacOS you're running. In my case I'm on Sonoma 14.4.

[fnimick]

@endigo9740 why not simply remove h-full from the classes generated in the initials case to match the image case? I can't think of a reason for them to be distinct - especially since they matched prior to the removal of h-full in the image case to fix that bug.

Even if new versions of Safari fix the problem, we still need to support old ones.

[endigo9740]

Even if new versions of Safari fix the problem, we still need to support old ones.

I agree, which is why I asked if you could replicate on an older OS to confirm the issue is still present. I don't make assumptions that changes will fix things, I work on empirical data. But it would be helpful to have confirmation as I cannot easily roll back my operating system version.

I'll make the change next time I have a chance to work on v2 issues, otherwise I will accept a PR - which will come with a preview URL we can verify against.

[fnimick]

Ah, I understand. I've also updated and can't test with old safari versions anymore, unfortunately.

[endigo9740]

We've outlined our upcoming plans for supporting Skeleton v2 here:
#3063

As it doesn't sound like this issue can be easily tested, I'm going to go ahead and close this out for now. If you discover a similar issue to be present in Skeleton v3, please let us know. We're open to reopening this issue, or you are welcome to resubmit in a new ticket.

Thanks!

[fnimick]

I am fairly sure this still occurs in v3 as an unnecessary h-full is still present on the text variant: see https://github.com/skeletonlabs/skeleton/blob/next/packages/skeleton-svelte/src/lib/components/Avatar/Avatar.svelte#L25 - fallbackBase includes h-full

Why not simply remove it? It renders fine without it, IIRC.

[endigo9740]

@fnimick I believe we did port some of the styles over to v3 verbatim. So I'll reopen this and we'll like go ahead and remove that. Thanks for confirming.

[GabrielPaliari]

Hi guys, ive sent a message in group and i was reading the guidelines. Could you please assign this issue to me? Im gona test in BrowserStack because i use linux and dont have safari.

[endigo9740]

@GabrielPaliari done! Thanks for the assist. Just FYI we want the change regardless if it's still causing a bug or not. So a PR is welcome.

I'm also not normally one to rush this the contribution process, but just FYI we're getting fairly close to our full stable release so bug tickets like this will be high priority starting next week. The sooner we can get this change the better.

[GabrielPaliari]

hello endigo, im sory for taking too long, the job was demanding this week. I saw that you created a pr in #2333 and thought that it was solved already. Sorry for my confusion. I will try my best to create a PR now. ASAP

[nullpointerexceptionkek]

I am unable to reproduce this issue. But I think this issue meant that the h-full class might not be needed.
@GabrielPaliari can you remove the class and see if everything works fine?