When the product image carousel (Fancyapps Carousel) is used, images visibly jump/flash on page load. All carousel slides are briefly rendered as stacked block elements before the Fancyapps JS initializes and restructures the DOM into its viewport/track layout. This causes a Flash of Unstyled Content and a noticeable Cumulative Layout Shift,

Issue fork belgrade-3572322

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

majmunbog created an issue. See original summary.

majmunbog opened merge request !90

majmunbog’s picture

majmunbog commented

In the MR before Fancyapps initializes, the carousel root has opacity: 0, so the “stacked slides” phase is invisible.
Once the JS adds .is-ltr / .is-rtl, the carousel fades in at opacity: 1 with the correct layout.

majmunbog’s picture

majmunbog commented
Status: Active » Needs review