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.

Imgur: The magic of the Internet (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:

Even with content of 30kb it does this glitch so it ain’t necessarily the weight

This is an old thread, but the second part of my initial reply still stands. Setting a minimum height for the image block to occupy will prevent the tab from showing “collapsed” for a second before jumping to the appropriate size.

Another solution, since I didn’t mention it initially, is to try setting those tab images to load with the page by choosing “Eager” under the Load dropdown field within the image settings. This will force the images to load with the page instead of right when the user clicks on the tab.