The WooCommerce 3.0 product gallery, which you add theme support for in your theme’s php, has a few features one of them being FlexSlider. Like all responsive sliders, it calculates width in full pixels and rounds to the nearest down. However percentage based layouts (like the 50% 50% in WooCommerce single product) don’t work that way, so at certain veiwport widths, you will see 1px hanging out of the next slide. If all your slides use the same background, then you don’t see this, but with images this shows up and looks bad. There are many ideas out there, such as the ones on the the GitHub here and here and many other places. I see it in Chrome and FireFox but it happens in Safari too. I tried every solution and none of them worked because once you try a fix at a certain viewport width it goes away but it shows up elsewhere because the width of the percentage container is not a full pixel so the script is rounding -1px less, it doesn’t round up or it won’t fit.
So if you have a white background, you can add this CSS and it will fix the issue. If you are using a solid background, change the
.woocommerce-product-gallery::after to your background color.
All the best,
Affiliate Notice: I have affiliate links all over the place for companies I recommend. By purchasing through these links you help to support my family and to keep my blog going.