search

leerob / site

My site built with Next.js, Tailwind, and Vercel.
https://leerob.com
7.2k stars 1.39k forks source link

Safari Image Layout Shift #694

Closed felixhoevelborn closed 6 months ago

felixhoevelborn commented 10 months ago

I noticed a weird issue when using the latest Safari versions (mobile and desktop).

The images on home have a layout shift when scrolling or clicking / tapping on one of those, which can easily happen.

As this does not happen on Chrome, there must be something about the CSS.

2024-01-15 um 10 50 52

leerob commented 10 months ago

Open to ideas on how to fix it!

XahidEx commented 10 months ago

Open to ideas on how to fix it!

Lee, photos don't show at all. I mean not all of these. (Using Samsung) On some phones and browsers, It shows 4-5 pictures.

AdrianFahrbach commented 6 months ago

Just noticed this as well. Crazy how much activity is on this repo 😅

The issue probably has to do with how Safari calculates width on the virtual viewport, so that the layout adjusts its columns on zoom and stays readable. So it is either an a11y feature or a bug 😅 The easy fix for this is to give the container a fixed height (e.g. 496px on desktop) and prevent Safari from recalculating the height. The correct solution would probably be switching to a grid as done in the PR.

leerob commented 6 months ago

https://github.com/leerob/leerob.io/pull/698/