In some rare cases, you may see a small sliver of one of your other product images to the left of the current image in the product gallery, as shown here:
This issue typically only arises in these cases:
- You are using a Retina or other high resolution screen (typically one with 2x resolution).
- There are two images, placed one after another, that have significantly different backgrounds. In the example above, the jacket photo is set against a white background, while the image just before it is a "lifestyle shot" of a person wearing the jacket. What we're seeing is the far right side of the background behind the person in that sliver.
- The issue also only occurs in certain browsers and when the browser window is a certain size.
This issue occurs due to what's called a "half pixel" or "sub pixel" bug.
In order to make our themes as responsive as possible, most image widths and heights are defined using percentages. Behind the scenes, your browser is performing all sorts of calculations to determine the correct sizing, and this sometimes results in uneven numbers.
For example, let's say the image gallery is sitting in an area that's 101 pixels wide. Since 101 can't be divided evenly (since 101 divided by 2 equals 50.5), there is the potential for an issue because standard resolution monitors can't display half a pixel (since, by definition, a pixel is the smallest possible point on these types of screens).
Most browsers will attempt to round the number to make things even. However, this is inconsistent.
You may also notice that the issue only occurs at certain, very specific window widths. This is because as the browser window size changes, even only by a single pixel, the calculations may automatically adjust and the numbers may become even, which essentially eliminates the issue at that window size.
To fix this issue, you can apply a small CSS tweak to the end of the styles.css.liquid file (online store > themes > actions > edit code > assets > styles.scss.liquid).
.product_slider .slides img { width: 99% !important; }
If this solution doesn't work, another fix is to edit your product images to have a few extra pixels (that are either white or transparent) on the left and right sides to compensate for this issue. Simply re-upload the new images to your products.