Woocommerce single product image browser resize issue

i have found a bug that i cant seem to resolve. https://staging.spectaculars.us/product/benjamin-black/
The product gallery .flex-active-slide main image does not resize after updating to the most recent wp/woocommerce.
To be more specific the using chrome, when you have a full screen session and make it a windowed session of a smaller size the active image is then clipped. If you do the reverse and increase the window from a smaller sized one the image remains the same and in addition to that it will also show the overflow of the following product image in the gallery.


I am using some custom css as shown below. Please note that removing the css does not resolve the issue.
The custom css that is in use at the moment is as suggest in other places on the forum. I have regenerated thumbnails and tried troubleshooting but have not been able to figure out what is causing the issue.
The .flex-viewport div has the proper dimensions, however the .woocommerce-product-gallery__image does not inherit them after resizing the browser. Any ideas?

 /* 
Moves the Single Product Thumbnails under the Product Image
*/

.woocommerce-product-gallery__trigger img {
  opacity: 0 !important;
}


.single-product .woocommerce-product-gallery__image >a>img{
    width:100% !important;
}

.single-product .flex-control-nav.flex-control-thumbs li {
    float: left;
    width: 18.3%;
    margin-bottom: 8px;
    padding: 3px;
    background: transparent;
    border: 1px solid #eee;
    margin-left: 0;
    margin-right: 0.5em;
}

.single-product .flex-control-nav.flex-control-thumbs li:nth-child(5) {
    margin-left: 0 !important;
}

.single-product .flex-control-nav.flex-control-thumbs img {
    width: 100%;
    height: auto;
}

.single-product .flex-control-nav.flex-control-thumbs {
    position: relative;
    padding-left: 0;
    padding-right: 0;
    padding-top:8px;
}

Hello There,

Thanks for writing in! I have checked the page and I could not replicate the issue.
Please check out my screenshot here: http://prntscr.com/hu2sil

Meanwhile, please check out this thread:

Hope this helps.

Please confirm that you have resized the full browser as stated in my post.
Your image only suggests that the page loads fine… Which it does. The issue occurs if the browser is resized.
The page loads fine as in your image however when you resize the browser to a smaller size the active image does not inherit the change. To address your image, if the original load is full screen/larger size(width)and you resize to smaller size(width)the image will clip. If you do the reverse the image will overflow. Please see the attached image with chrome dev tools showing that the image is smaller than the flex viewport area. ( the scenario being loading a smaller width and resizing to a larger one.)

Hi there,

It’s Woocommerce’s flex-slider issue, and you can’t control it with CSS since the slider rendering is done through javascript ( https://staging.spectaculars.us/wp-content/plugins/woocommerce/assets/js/flexslider/jquery.flexslider.min.js?ver=2.6.1 ). I tried triggering the flex slider resize method but it’s not working.

I’ll add this to our issue tracker as a bug.

Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.