CLS Issue even after providing image dimensions
Hello, I've noticed my website still has a CLS issue when throttling the network speed even though I've provided the image width and height. This is an Astro statically rendered site, so this code is server rendered ahead of time.
This occurs on the homepage on mobile.
I've attached a video. You can also review it yourself. It's the hero image on the homepage.
https://american-diagnostics-website-git-optimizations-croganm.vercel.app/
Here's what the element code is:
Any help would be appreciated
American Diagnostic Hearing Centers
Experience exceptional hearing care and 5-Star service. We offer free hearing tests, consultations, maintenance, cleaning, programming, and insurance processing. Enjoy a free 30-day trial with our incredible doctors of audiology and hearing aid specialists.
3 Replies
I know this only occurs when throttling, but I've done all I can to prevent this from happening
I have no idea if this is why but it could be because of your object-fit: cover? Maybe try giving the div container the same dimensions just to see if that will stop the CLS issue?
I threw aspect ratio on the div and no luck. Same with Object-cover. I'm extremely confused haha. I managed to get it but man it took a lot. I don't really know the dimensions before hand is the only issue since the image resizes. I ended up just throwing a min height on there for the worst case scenario and threw everything in a max width. Seems kind of macgyver but I guess it works!