Inspecting the slider in Safari and Chrome will eventually kill the browser

[MartinHaun]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v4.0.0 with grid extension 0.4.0

Description

Inspecting the slider in Safari on M1 Monterey 12.2.1 with Safari 15.3 and Chrome 99.0.4844.84 will eventually crash both browsers with these settings:

It will worsen quickly if i drag the inspecter back and forth while testing responsive modes (inspector on the right side of the browser).

It might be (another) issue on my end though.

Can provide video privately if needed as the project is not public yet.

Reproduction Link

No response

Steps to Reproduce

Slider with the following settings:

new Splide( '#splide-statements', {
            type: 'loop',
            perPage:1,
            gap: '1rem',
            lazyLoad: 'nearby',
            drag: true,
            pagination:false,
            padding: '2rem',            
            mediaQuery: 'min', // Work with min-width instead of max-width for breakpoint definitions
            breakpoints: {
                1400: {
                    perPage: 4,
                },
                1200: {
                    perPage: 3,
                    grid: {
                        rows: 2,
                        gap: {
                            row: '2rem',
                        },
                    },
                    gap: '2rem',
                },
                600: {
                    perPage: 2,
                    grid: {
                        rows: 2,
                        gap: {
                            row: '1.5rem',
                        },
                    },
                    gap: '1.5rem',
                    drag: 'free',
                    snap: true, 
                    padding: '5rem',  
                },
            },
        }).mount( window.splide.Extensions );

Markup (Hubl):

{# Carousel #}
        <div class="splide statements__carousel" id="splide-statements" role="group" aria-label="Dot Legal statements">
            <div class="splide__track">
                <ul class="splide__list">
                    {% for statement in module.statement %}
                        <li class="splide__slide">
                            <div class="statements__statement statement">
                                <div class="statement__intro">
                                    {# Image #}
                                    <div class="statement__image">
                                        <img data-splide-lazy="{{ statement.image.src }}" alt="{{ statement.image.alt }}">
                                    </div>
                                    {# Intro #}
                                    <div class="statement__info">                                    
                                        {# Name #}
                                        {{ statement.full_name }}
                                        {# Title #}                                            
                                        <span>{{ statement.job_title }}</span>
                                    </div>
                                </div>
                                {# Body #}
                                <div class="statement__body">
                                    {# Description #}
                                    {{ statement.the_statement|truncate(200, false, '...') }}
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
            {# Custom arrows #}
            <div class="splide__arrows">
                <button class="splide__arrow splide__arrow--prev">
                    Prev
                </button>
                <button class="splide__arrow splide__arrow--next">
                    Next
                </button>
            </div>
        </div>

Open inspector, drag it around to test responsive modes, inspector should slow down and eventually crash.

Up until now the browser doesn't seem to crash if I poke around the slider without inspecting it.

Expected Behaviour

Non-chrashing inspector.

[MartinHaun]

Just to add:

Resizing the browser with no inspector open and all other scripts disabled will also crash the browser eventually.

[NaotoshiFujita]

I have no idea. That does not happen on my side.

[MartinHaun]

Well, actually it does (well on your "site" at least). Here's a short demonstration:

https://www.dropbox.com/s/7s2bbvyqyoimkh7/IMG_6942.MOV?dl=0

I am a bit excessive with the dragging to make it happen faster, but as you can see around the 17s mark, the inspector and browser breaks. Right click nor regular clicks on the slider arrows works.

• Edit * This behaviour does not happen on other sites (e.g. just tested our biggest local news site with loads of content).

[MartinHaun]

My best guess is that some recalculation runs wild

[NaotoshiFujita]

Yes, I know about my site performace. Since it contains many carousels, recaluculation consumes CPU like:

But each one takes around 2ms:

How many carousels are you displaying in your page?

[MartinHaun]

Only one.

Just had two colleagues confirm that the exact same thing happens when they too inspect the slider.

[NaotoshiFujita]

Then, I have no idea for now. Need to dig into it.

[NaotoshiFujita]

Well, what if removing the Grid extension?

[MartinHaun]

Then it seems to work. However in this case I need the grid function, so I hope you are able to take a look at it at some point.

I can also make the grid example on the SplideJS website break the inspector, it just takes longer for some reason.

[MartinHaun]

If you want, I can send you the link to the page where the slider in question is inserted. It breaks almost instantly there, upon inspection.

[NaotoshiFujita]

Yes, please :)

[MartinHaun]

Sent, please confirm receiving it so i know it reached you :)

[NaotoshiFujita]

Thanks. I've received it :)

[NaotoshiFujita]

Can you try the latest version?
Splide: v4.0.1
Grid: 0.4.1

[MartinHaun]

That does seem to have solved it! I just spent 5 minutes trying to break it to no avail :)

Can you elaborate on what the fix was?

Wanna thank you for a very swift fix, that was very nice of you.

[NaotoshiFujita]

In some cases, grid and/or pagination components failed to destroy themselves. I'm not 100 sure about the condition, but I've optimized suspicious code and ensured the distruction.

[MartinHaun]

Thanks for clarifying :)

Since yesterday i've had two or three instances where the inspector will break and not function. But it doesn't happen when resizing the browser like it did yesterday.

Instead it seems to happens over a prolonged period, so there might still be a small leak somewhere that adds up over time. Doesn't seem to hurt the userexperience of the site though.

Anyway, just wanted to let you know, don't know if there's really more to do here. Thanks a ton again.

[MartinHaun]

Well ok, I think i caught it just now.

Poke around in the slider with the inspector open then just let it sit for x minutes and at some point the inspector will update/flash and then stop working.

Took around 5 minutes in this case.

[NaotoshiFujita]

I've tested it in "pure" environment (since your site is loading other scripts), and never seen the bug.
I think I can do nothing anymore.

[MartinHaun]

Understandable. I appreciate everything you did, i'll close it. Thanks

[greenlevel]

Hi, I have actually a similar situation.
When loading the grid the page also flashes and will stop working.
I also have multiple sliders.

@MartinHaun You sorted the issue? or still have this problem?

[MartinHaun]

@greenlevel

We updated to version 4.0.1 for both Splide js and Splide extensions (grid version 0.4.1), and the problem (for the most part) went away. The regular user wouldn't experience any issues - only us when inspecting the page with the slider on it for long periods of time.

Package.json:

"dependencies": { "@splidejs/splide": "^4.0.1", "@splidejs/splide-extension-grid": "^0.4.1" }

[greenlevel]

@MartinHaun
Thank you for the quick feedback.

I used the newer version of splidejs 4.1.4 with 0.4.1 also for the grid.

Works fine with only using 1 slider (grid).
But multiple sliders and grid eventually crashed on my side.