Browser: Chrome 152.0.7977.64
OS: macOS
URL: Link to a page that illustrates this issue
Product gallery (thumbnail slider, left/right) — flexslider measures the wrong width on cached reload
Environment
- Bricks 2.4-beta3
- WooCommerce 11.0.1
- Element: Product Gallery (
product-gallery) with Thumbnail slider enabled and Thumbnail position Left or Right - Main product image size:
woocommerce_single(600px wide)
Steps to reproduce
- Single product with more than one gallery image.
- Product Gallery: Thumbnail slider on, position left or right.
- Viewport wide enough that the main gallery column is wider than the image’s intrinsic width (e.g. ~1700px+ with a 600px
woocommerce_singleimage). - Open the product in a new browser window (or first visit with cold cache) → layout looks correct.
- Hard refresh (or reload) the same page → layout breaks.
Closing the window and opening the product again looks correct. Reloading again breaks it.
Expected Each main slide matches the flexslider viewport width. Only the active image is visible; thumbnails stay in their column.
Actual On reload, slides stay at the image’s intrinsic width (e.g. 600px) while the viewport is wider (e.g. 606–610px). The next slide bleeds into view (large gap + sliver of the next image). Flexslider computedW is 600 after reload vs the correct column width on first load.
A window resize (or flexslider.resize()) after the broken state corrects the slides, so this is a one-shot measure, not a permanently wrong layout.
Cause In assets/css/integrations/woocommerce.min.css (same in woocommerce-layer.min.css):
.brxe-product-gallery[data-pos=left] .woocommerce-product-gallery { flex-direction: row-reverse }
.brxe-product-gallery[data-pos=right] .woocommerce-product-gallery { flex-direction: row }
These apply even when .thumbnail-slider is on.
In slider mode, in-gallery thumbs are hidden:
.brxe-product-gallery.thumbnail-slider .woocommerce-product-gallery .flex-control-thumbs { display: none }
The real thumbs are a sibling (.brx-product-gallery-thumbnail-slider). The gallery’s only real child is the Flexslider viewport. As a row flex item it shrinks to the image’s intrinsic width. Flexslider measures that once on init.
- First visit: images load from the network → a later measure (load) updates
computedW. - Reload: images are cached → that second pass never runs → wrong width sticks.
The row flex-direction on .woocommerce-product-gallery only makes sense for native Woo thumbs (.flex-control-thumbs) inside the gallery, not for Bricks’ separate thumbnail slider.
Suggested fix Don’t apply the row/row-reverse rules in slider mode, e.g.:
.brxe-product-gallery:not(.thumbnail-slider)[data-pos=left] .woocommerce-product-gallery { flex-direction: row-reverse }
.brxe-product-gallery:not(.thumbnail-slider)[data-pos=right] .woocommerce-product-gallery { flex-direction: row }
Alternatively force column in slider + side thumbs:
.brxe-product-gallery.thumbnail-slider[data-pos=left] .woocommerce-product-gallery,
.brxe-product-gallery.thumbnail-slider[data-pos=right] .woocommerce-product-gallery {
flex-direction: column;
}
That override on the element restores correct slide width on first load and reload (verified Chrome, 768–1920px).
Workaround (site-level) Custom CSS on the Product Gallery element as above. Safe to remove if this is fixed upstream.