FlexSlider
FlexSlider copied to clipboard
woocommerce
Slide postions of by one pixel
If the width of the slides is not an integer, it happes, that the position of the slides are not correctly calculated.
if (slider.isFirefox) { target = (vertical) ? "translate3d(0," + target + ",0)" : "translate3d(" + (parseInt(target)+'px') + ",0,0)"; } else { target = (vertical) ? "translate3d(0," + target + ",0)" : "translate3d(" + ((slider.vars.rtl?-1:1)*parseInt(target)+'px') + ",0,0)"; }
The problem is, that if width is a float, the offset for translate3d is calculated wrong.
Fix: change parseInt to parseFloat and everything is good.
Thank you @hannesdorn !
This issue still exists in the version of Flexslider that is bundled with WooCommerce (at least as of 4.9.1 - I haven't tried 5.x yet). At some browser sizes, I was getting a tiny sliver of the previous image on the left of the current one. It's only noticeable if the two images have different backgrounds of course, so most people will probably never notice it. Sometimes it's 1px wide, sometimes 2px, sometimes nothing. It was driving me mad. And I see on StackOverflow and elsewhere, various people have noticed this for years, and suggested various fixes. But your fix is the one that works.
The code in WooCommerce is different to the version on here, despite having the same version number. All I had to do is change the parseInt in this line:
target = (vertical) ? "translate3d(0," + target + ",0)" : "translate3d(" + (parseInt(target)+'px') + ",0,0)";
to parseFloat and the problem is fixed.
+1 - also running into this issue in the WooCommerce bundled version.
Any way to fix without manually patching WooCommerce plugin files?
My way...
woocommerce div.product div.images .woocommerce-product-gallery__image img { width: 99%; margin: auto; }
Changing parseInt() to parseFloat() didn't work in my case. I was able to fix this issue changing:
slider.computedW = slider.itemW - slider.boxPadding
to:
to slider.computedW = slider.itemW - slider.boxPadding + 1
at:
https://github.com/woocommerce/FlexSlider/blob/9c4e6f8f5069a7d7620c89d5d0a915d39fda9604/jquery.flexslider.js#L999
The cases in which the image would be shown correctly (without being off by 1 pixel), with the change above, lose the rightmost pixels, which is acceptable in my case, and most probably won't be noticed by the users (it's much better than having 1 less pixel at the right, that can be clearly seen by users).
