Layout shift when rendering `react-glider` container on the server

kevinfarrugia commented 2 years ago

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.

demo

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 https://github.com/NickPiscitelli/Glider.js/pull/235

agboolaidris commented 1 year ago

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

kevinfarrugia commented 1 year ago

@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.

kevinfarrugia / react-glider

Layout shift when rendering `react-glider` container on the server #130