Scrollbar funky behaviour until resize event

[MagicLegend]

• Swiper Version: 6.4.9
• Platform/Target and Browser Versions: KDE Neon 5.20 - Chrome: 88.0.4324.96 (Official Build) (64-bit) | Firefox: 85.0 (64-bit)

What You Did

Initialized React component. I can't get it replicated on StackBlitz. It is possibly related to #2218, and the fix there works sometimes. Manually changing the viewport size fixes it immediately. Manually firing window.dispatchEvent(new Event('resize')); will also fix it immediately. Used settings:

        settings: {
            spaceBetween: 0,
            slidesPerView: 'auto',
            centeredSlides: true,
            scrollbar: {
                hide: false,
                draggable: true,
                el: '.swiper-scrollbar',
                dragSize: 75
            },
            breakpoints: {
                // window width >= 768px
                768: {
                    scrollbar: {
                        dragSize: 175.5
                    }
                }
            },
            // Fix for https://github.com/nolimits4web/swiper/issues/2218
            onInit: () => {
                setTimeout(() => {
                    window.dispatchEvent(new Event('resize'));
                // eslint-disable-next-line no-magic-numbers
                }, 500);
            }
        }

Expected Behavior

A working slider and scrollbar.

Actual Behavior

Scrollbar will be very funky until a Resize event is fired:

(This is Chrome, Firefox is identical behaviour; both in desktop and emulated mobile mode)

[nolimits4web]

I can't get it replicated on StackBlitz

Then it can be issue on your side. If something in Swiper starts workin after window resize, then in 99% there was something wrong with init process, e.g. it was initialized in initially hidden container, or size was changed after init, etc.

[MagicLegend]

Could be for sure. I just saw the other issue, and thought it might be worth it to submit this variant.

I am using ScandiPWA, built on top of Magento 2, so there are indeed a bunch of cogs and wheels around the slider.

If something was wrong with the init process, why does firing the call 500 ms after completing the init not (always) fix it? I'd say that 9 out of 10 times it still doesn't work. I've updated it now to firing the event after onInit a bunch of times (500, 750, 1000 and 2000ms) and the slider seems to work reliably now every time. Given the way ScandiPWA works, I'd guess that your guess of it being initialized in a hidden container could definitely be correct, or at least in the right direction.

Is there a better event to hook this into than onInit?

[nolimits4web]

Try to enable observer and observeParents parameters

[rsofista]

I have an issue on React where initially I added one item to the swipper with a load image, once the request for the actual items finished, all of them were added, this broke the left and right navigation arrow and the dragging, solved it by just setTimeout(() => window.dispatchEvent(new Event('resize')), 500).
This didn't solved the problems every time so in the end I rendered the Swipper only when all of the items were present

[em]

I had the same issue. I can add that simply manually calling update() or scrollbar.updateSize(), in the onImagesReady callback fixes the issue. Which is odd, and this does seem to be a bug, since the documentation suggests this is the intended built-in behavior, updateOnImagesReady. Looks like that is not being fired as expected.

As an aside - enabling mutation observers as suggested made no difference.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed due to inactivity. If this issue is still actual, please, create the new one.