Notice how the image appears soon as the browser window is resized when the collapse element is expanded? Are you lazy loading the images?
The HTML of a fresh expand shows inline css of:
<div class="woocommerce-product-gallery__image single-product-main-image slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 0px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;" tabindex="0">
and then after a browser window resize:
<div class="woocommerce-product-gallery__image single-product-main-image slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 492px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;" tabindex="0">
See how width: 0px changes to width: 492px; ?
try adding a maptastic class to the targets using targclass.
There is a solution with Collapse-Pro-Matic using callbacks to trigger a resize event, but this is not a feature offered with the free version.
Thread Starter
Ibby
(@ibby)
Thank you for such a quick reply!
Yes I did have lazy loading enabled through Jetpack. I’ve disabled it now though and attempted to add targclass=”maptastic” to my target divs.
Unfortunately it doesn’t seem to have made a difference…
