Layout shift when rendering react-glider container on the server

[kevinfarrugia]

At the moment, before the Glider is initialised, the items in the glider-contain do not appear correct and are shifted as the Glider loads.

The user can choose to:

• Incur a layout shift
• Not show the content until the Glider has initialized

This is related to an issue on Glider.js. See NickPiscitelli/Glider.js#235

[agboolaidris]

I am also facing the same issue.
@kevinfarrugia do you forget any solution to this bug?

[kevinfarrugia]

@agboolaidris I currently recommend solving this using CSS rather than changing the underlying behavior in Glider.js. There isn't a single solution that applies for all cases, but in most cases you are able to fix this using CSS.

For example, I have updated a demo built using Next: https://next-react-glider.vercel.app/ to solve this issue using CSS. In this case I added the following CSS:

.track:not(:global(.glider-track)) {    
  display: flex;
  flex-direction: row;
  overflow-x: hidden;
}

.slide:not(:global(.glider-slide)) {
  flex: 0 0 calc(100% - 2rem);
}

I have also seen a similar technique in use on production websites, for example on https://mfa.com.mt/ where the height attribute of the banner is fixed and the other banners are hidden using overflow: hidden.