René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Inspecting the slider in Safari and Chrome will eventually kill the browser","articleBody":"### Checks\r\n\r\n- [X] Not a duplicate.\r\n- [X] 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\r\n\r\n### Version\r\n\r\nv4.0.0 with grid extension 0.4.0\r\n\r\n### Description\r\n\r\nInspecting 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:\r\n\r\n![image](https://user-images.githubusercontent.com/6605087/161920628-884bbae7-dfbc-457d-af9a-3adc9bc8eafd.png)\r\n\r\nIt will worsen quickly if i drag the inspecter back and forth while testing responsive modes (inspector on the right side of the browser).\r\n\r\nIt might be (another) issue on my end though.\r\n\r\nCan provide video privately if needed as the project is not public yet.\r\n\r\n\r\n\r\n### Reproduction Link\r\n\r\n_No response_\r\n\r\n### Steps to Reproduce\r\n\r\nSlider with the following settings:\r\n\r\n```js\r\nnew Splide( '#splide-statements', {\r\n            type: 'loop',\r\n            perPage:1,\r\n            gap: '1rem',\r\n            lazyLoad: 'nearby',\r\n            drag: true,\r\n            pagination:false,\r\n            padding: '2rem',            \r\n            mediaQuery: 'min', // Work with min-width instead of max-width for breakpoint definitions\r\n            breakpoints: {\r\n                1400: {\r\n                    perPage: 4,\r\n                },\r\n                1200: {\r\n                    perPage: 3,\r\n                    grid: {\r\n                        rows: 2,\r\n                        gap: {\r\n                            row: '2rem',\r\n                        },\r\n                    },\r\n                    gap: '2rem',\r\n                },\r\n                600: {\r\n                    perPage: 2,\r\n                    grid: {\r\n                        rows: 2,\r\n                        gap: {\r\n                            row: '1.5rem',\r\n                        },\r\n                    },\r\n                    gap: '1.5rem',\r\n                    drag: 'free',\r\n                    snap: true, \r\n                    padding: '5rem',  \r\n                },\r\n            },\r\n        }).mount( window.splide.Extensions );\r\n```\r\n\r\nMarkup (Hubl):\r\n\r\n```html\r\n{# Carousel #}\r\n        \u003cdiv class=\"splide statements__carousel\" id=\"splide-statements\" role=\"group\" aria-label=\"Dot Legal statements\"\u003e\r\n            \u003cdiv class=\"splide__track\"\u003e\r\n                \u003cul class=\"splide__list\"\u003e\r\n                    {% for statement in module.statement %}\r\n                        \u003cli class=\"splide__slide\"\u003e\r\n                            \u003cdiv class=\"statements__statement statement\"\u003e\r\n                                \u003cdiv class=\"statement__intro\"\u003e\r\n                                    {# Image #}\r\n                                    \u003cdiv class=\"statement__image\"\u003e\r\n                                        \u003cimg data-splide-lazy=\"{{ statement.image.src }}\" alt=\"{{ statement.image.alt }}\"\u003e\r\n                                    \u003c/div\u003e\r\n                                    {# Intro #}\r\n                                    \u003cdiv class=\"statement__info\"\u003e                                    \r\n                                        {# Name #}\r\n                                        {{ statement.full_name }}\r\n                                        {# Title #}                                            \r\n                                        \u003cspan\u003e{{ statement.job_title }}\u003c/span\u003e\r\n                                    \u003c/div\u003e\r\n                                \u003c/div\u003e\r\n                                {# Body #}\r\n                                \u003cdiv class=\"statement__body\"\u003e\r\n                                    {# Description #}\r\n                                    {{ statement.the_statement|truncate(200, false, '...') }}\r\n                                \u003c/div\u003e\r\n                            \u003c/div\u003e\r\n                        \u003c/li\u003e\r\n                    {% endfor %}\r\n                \u003c/ul\u003e\r\n            \u003c/div\u003e\r\n            {# Custom arrows #}\r\n            \u003cdiv class=\"splide__arrows\"\u003e\r\n                \u003cbutton class=\"splide__arrow splide__arrow--prev\"\u003e\r\n                    Prev\r\n                \u003c/button\u003e\r\n                \u003cbutton class=\"splide__arrow splide__arrow--next\"\u003e\r\n                    Next\r\n                \u003c/button\u003e\r\n            \u003c/div\u003e\r\n        \u003c/div\u003e\r\n```\r\n\r\nOpen inspector, drag it around to test responsive modes, inspector should slow down and eventually crash.\r\n\r\nUp until now the browser doesn't seem to crash if I poke around the slider without inspecting it.\r\n\r\n### Expected Behaviour\r\n\r\nNon-chrashing inspector.","author":{"url":"https://github.com/MartinHaun","@type":"Person","name":"MartinHaun"},"datePublished":"2022-04-06T07:43:14.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":23},"url":"https://github.com/740/splide/issues/740"}