Having init="false" leads to layout shifts

[krzksz]

Check that this is really a bug

• I confirm

Reproduction link

https://colorful-grizzled-oboe.glitch.me/

Bug description

I'm working on a website that uses Swiper Element. There are multiple components that wrap it to provide custom options so the init="false" is used in that cases. Because there can be multiple carousels inserted into the HTML at once, I wanted to split their initialisation into separate tasks to not block the main thread for too long.

The issue is that any delay in calling the .initialize() leads to a layout shift. This is caused by the fact that both <swiper-container> and <swiper-slide> call this.attachShadow() in their constructors. It makes the browser hide all of their content until initialize() moves all elements into slots.

Expected Behavior

I would expect the carousel to retain its appearance until the .initialize() function is called, especially when init="false" option is provided.

Actual Behavior

If the <swiper-container> and <swiper-slide> elements are already registered, they will hide their whole content until the .initialize() function is called.

Swiper version

v11.2.6

Platform/Target and Browser Versions

macOS, Chrome

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR