Avatar breaks AppBar in iPad Pro 11'

[alanfaz]

Current Behavior

I have noticed that whenever I add the avatar to the apprait "trail" slot, things break in my iPad Pro, sending the contents of the Appbar to the middle of the page.
Here you can find images with and without the Avatar.

Expected Behavior

The Appbar should stay as normal, showing the Avatar at the trail slot without moving.

This is a test with a button; the expected behaviour.

This is how the responsive preview shows it. The way it should be shown.

Steps To Reproduce

This is the header slot in my AppShell.

<svelte:fragment slot="header">
		<div class="3xl:container 3xl:mx-auto">
			<AppBar slotDefault="place-self-center">
				<svelte:fragment slot="lead">
					<div class="flex items-center">
						<button class="md:hidden btn btn-sm mr-4" on:click={drawerOpen}>
							<span>
								<svg viewBox="0 0 100 80" class="fill-token w-4 h-4">
									<rect width="100" height="20" />
									<rect y="30" width="100" height="20" />
									<rect y="60" width="100" height="20" />
								</svg>
							</span>
						</button>
					</div>
					<a href={`/app/${$page.params.residencial}`}>
						<img src={logo} alt="logotipo_cantabria" class="w-[100px]" />
					</a>
				</svelte:fragment>
				<svelte:fragment slot="default">
					<div class="divide-x-2 divide-azul-cantabria xxs:hidden md:flex">
						<a
							href="/app/cantabria/X"
							class="menu-item px-4 py-1 text-lg text-azul-cantabria font-bold">Ubicación</a
						>
						<a
							href="/app/cantabria/D"
							class="menu-item px-4 py-1 text-lg text-azul-cantabria font-bold">Amenidades</a
						>
						<a
							href="/app/cantabria/M"
							class="menu-item px-4 py-1 text-lg text-azul-cantabria font-bold">Modelos</a
						>
						<a
							href="/app/cantabria/A"
							class="menu-item px-4 py-1 text-lg text-azul-cantabria font-bold">Sembrados</a
						>
					</div>
				</svelte:fragment>

				<svelte:fragment slot="trail">
					{#if $page.data.userId !== undefined}
						<Avatar
							border="border-4 border-surface-300-600-token hover:!border-primary-500"
							cursor="cursor-pointer"
							width="w-12"
							initials="Nombre Apellido"
							src="/cantabria_bg_2.png"
						/>
						<div class="" use:popup={popupClick}>
							<div class="card p-4 w-72 shadow-xl z-[999] absolute" data-popup="popupClick">
								<div class="">
									<div class="mt-4">
										<p class="font-bold">Nombre</p>
										<p class="opacity-70">Apellido</p>
									</div>
									<div class="mt-5">
										<button class="btn btn-sm rounded w-full bg-gray-400">Cerrar Sesion</button>
									</div>
								</div>
							</div>
						</div>
					{/if}
				</svelte:fragment>
			</AppBar>
		</div>
	</svelte:fragment>

I made this stackblitz simulating the code; I haven't been able to test on my iPad

Link to Reproduction / Stackblitz

https://stackblitz.com/edit/stackblitz-starters-psumnv?file=package.json

More Information

No response

[endigo9740]

@alanfaz just to clarify - your title says it breaks the App Rail, which is a vertical menu bar that goes along the side of the screen. But I only see you using an App Bar, which is a horizontal bar that can be used as a header at the top of the screen. Both components have a "trail" slot, so I wanted to confirm which you're having issue with.

[alanfaz]

Sorry, yes its the appbar

[endigo9740]

Given the bulk of this discussion has occurred on Discord we'll keep this here until we can discovered an actionable issue on Skeleton's end. Then we can either reopen this ticket or create a new one.

https://discord.com/channels/1003691521280856084/1123428725741080637/1123428725741080637

[trentpeterson]

I encountered this issue using Safari on MacOS (Skeleton 2.1.0, Skeleton TW plugin 0.2.0, Tailwind 3.3.3). Placing an Avatar (<Avatar initials="SK" />) in the trail slot of an AppBar results in the contents of the AppBar rendering about halfway down the viewport.

I was able to track this down to .aspect-square { aspect-ratio: 1/1; }. Overriding this class (.avatar.aspect-square) with aspect-ratio: auto appears to solve the issue on Safari, but I haven't dug into why.

[endigo9740]

@trentpeterson please don't comment on closed issues. We do not actively monitor for these and it's easy to miss.

Per your issue - make sure you're running a modern version of Safari. Safari was one of the last browsers to adopt support for the Aspect Ratio CSS style, which is now natively part of Tailwind. In the past, Tailwind provided an official plugin to support this in older versions of Safari (before Safari 14 I believe, from 2002):
https://github.com/tailwindlabs/tailwindcss-aspect-ratio

Please note that Skeleton does not support old versions of Safari. We support and encourage only current and/or modern versions of Tailwind, which have the aspect ratio features included by default.

If you require further help with this, please create a new issue or reach out on Discord. We will not respond here.