-
Notifications
You must be signed in to change notification settings - Fork 1.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Slide postions of by one pixel #1780
Comments
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 |
+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 { |
Changing
to:
at: FlexSlider/jquery.flexslider.js Line 999 in 9c4e6f8
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). |
Faced with this problem. Replacing parseInt with parseFloat helped. |
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.
The text was updated successfully, but these errors were encountered: