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