button flickers on load

[s1n7ax]

I don't know if this is intentional or not. But When I reload, the social login buttons in the form flickers. It starts small and expands. Biggest issue is the the button text. It moves from bottom to top.

2024-11-14_08-44-31.mp4

<main class="grid h-full w-full place-content-center">
	<div class="card w-96 bg-base-100 shadow-xl">
		<figure>
			<img
				class="h-64 object-cover"
				src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
				alt="Shoes"
			/>
		</figure>
		<div class="card-body">
			<h2 class="card-title">Login to you account</h2>
			<div class="card-actions justify-end">
				<button class="btn btn-secondary btn-block"
					><img
						src="https://www.svgrepo.com/show/512317/github-142.svg"
						alt="GitHub"
						class="h-[18px] w-[18px]"
					/>
					Continue with GitHub
				</button>

				<button class="btn btn-secondary w-full"
					><img
						src="https://www.svgrepo.com/show/475656/google-color.svg"
						alt="Google"
						class="h-[18px] w-[18px]"
					/>Continue with Google
				</button>

				<button class="btn btn-secondary w-full"
					><img
						src="https://www.svgrepo.com/show/448234/linkedin.svg"
						alt="Google"
						class="h-[18px] w-[18px]"
					/>Continue with LinkedIn
				</button>
			</div>
		</div>
	</div>
</main>

[saadeghi]

The animation is intentional.
The movement of text is your OS font rendering issue.

This animation will completely change in daisyUI 5 as it is not compatible with all devices.