Oct 15
Blog Carousel – “getComputedStyle on Window” Error When Multiple Swiper Instances Are Present
Hi Divi Supreme Team,
I’m experiencing a recurring issue with the Blog Carousel module that seems related to Swiper.js initialization when there are multiple Swiper instances on the same page (for example, a Card Carousel above a Blog Carousel).
When the page loads, only one column appears in the Blog Carousel (even if more are set), and the console logs this error:
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
This usually points to Swiper attempting to read computed styles from the window instead of an actual element.
After testing, I found that simply changing the order of the modules — putting the Blog Carousel above the Card Carousel — fixes the issue. That seems odd, but here’s what’s likely happening:
Both modules initialize Swiper instances during page load. If the first one modifies the DOM (using transforms, overflow, or width calculations) while the second is initializing, Swiper may get incorrect dimensions and reference the wrong element, leading to the getComputedStyle(window) error. Changing their order changes the initialization timing, preventing the bug.
So this appears to be a race condition between Swiper instances.
Suggested fix:
To make this more robust, the Blog Carousel could:
- Ensure its Swiper instance initializes only after its container is fully rendered.
- Delay initialization until window.onload or until all Swiper containers are present in the DOM.
- Optionally call swiper.update() after all modules have loaded to ensure correct sizing.
Let me know if you’d like me to share a short video or URL where this happens — I can reproduce it consistently.
Completed