Rendering Issue with Splide in Elementor Editor on Chrome-Based Browsers

[Maycon-Duarte]

Checks

• [X] Not a duplicate.
• [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

Version

4.1.4

Description

I am encountering a rendering issue specifically within the Elementor editor when using the Splide carousel for custom widgets. The problem appears to be exclusive to Chrome-based browsers, as the slide renders correctly in Firefox.

I found the following discussions on this subject but none of them solved the problem:

https://github.com/Splidejs/splide/discussions/611 https://github.com/GrapesJS/grapesjs/discussions/4062

Reproduction Link

No response

Steps to Reproduce

1. Create a custom widget and import its dependencies according to the documentation https://developers.elementor.com/docs/widgets/add-new-widget/
2. Use the widget initialization hook to run your code and render the slide with the splide https://developers.ementor.com/docs/hooks/js/#example-5

document.addEventListener('DOMContentLoaded', function () {
    window.addEventListener('elementor/frontend/init', function () {
        elementorFrontend.hooks.addAction('frontend/element_ready/slide_eventos.default', function ($scope) {
            let widget = $scope[0];
        });
    });
});

3. open the element editor and add the created widget to the canvas

Expected Behaviour

I expect the Splide carousel to render seamlessly within the Elementor editor, ensuring a consistent experience across different browsers, including Chrome.