Webflow Tabs seem to be glitching on transition between tabs before correcting

Hello,

I’m relatively new to Webflow, have done the tutorials but I’m having a small issue with a site I’m building, basically it’s with the tab block I have on this site: https://proposal-mojo-main-site-3.webflow.io/

When I change tabs for the first time it seems to glitch and disappears for a second before loading correctly. After this initial load it seems fine, obviously it works but not ideal from an aesthetics perspective. It also doesn’t do this on the preview in Webflow.

https://imgur.com/a/ncZi7W6 (notice when I select tabs 3 / 4 / 5

I’m using Windows 10 - Chrome Version 87.0.4280.88 (Official Build) (64-bit)

any help would be much appreciated!

Thanks


Here is my site Read-Only: https://proposal-mojo-main-site-3.webflow.io/

This is due a combination of the image size (which seem to be on the large side, so I’d recommend aiming for something around 150kb or so rather than the ~500kb+ they are now) and the lack of a min-height on the tab content itself. Basically the height is determined by the size of the image itself, so before it loads the size is different than after it’s done loading.

You can use the object-fit feature to keep the images within a specifically sized frame and that way the image won’t shift the layout after it loads the asset (which should be less noticeable with a reduction to the size).

Hopefully that gives you enough to go off of to make the required changes, although feel free to let me know if you run into any issues :+1: