Product image carousel showing 1px sliver of previous image at some viewport sizes.

[themightyant]

There seems to be a bug on the product image carousel, on the single product page, that can display a 1px sliver of the previous image at some viewport sizes,

This is easiest to demonstrate with an image. (See link below) Note the sliver of the previous image on the left of the carousel.
https://ibb.co/HFcPKTc

Isolating the problem

• I have deactivated other plugins and themes and confirmed this bug occurs when only WooCommerce + Storefront theme are active.
• - I have created a new install of WordPress + Storefront to demonstrate this at https://themightyant.com/wordpress-cms/staging6/product/test-product/
• I can reproduce this bug consistently using the steps below.
• I have tested this in latest Chrome, Edge, Firefox all the same result

To Reproduce

Steps to reproduce the behaviour:

1. Go to https://themightyant.com/wordpress-cms/staging6/product/test-product/
2. Slide to the second product image
3. Change the viewport size
4. See previous image sticking out even after refreshing at SOME screen sizes

It seems to me to be a problem caused by a rounding error on the carousel JavaScript.

Expected behavior

I would expect the slider to only show the current slide

Browser Environment

Tested on:

• Platform: Windows 10
• Browser(s): Tested on latest Chrome, Edge, Firefox & Opera. Happens on all

WordPress Environment

• Latest WordPress 6.1.1
• Latest Storefront 4.2.0
• Tested with all other plugins except WooCommerce removed.

` ### WordPress Environment ###

WordPress address (URL): http://themightyant.com/wordpress-cms/staging6
Site address (URL): http://themightyant.com/wordpress-cms/staging6
WC Version: 7.1.0
REST API Version: ✔ 7.1.0
WC Blocks Version: ✔ 8.7.5
Action Scheduler Version: ✔ 3.4.0
Log Directory Writable: ✔
WP Version: 6.1.1
WP Multisite: –
WP Memory Limit: 128 MB
WP Debug Mode: ✔
WP Cron: ✔
Language: en_GB
External object cache: –

Server Environment

Server Info: Apache
PHP Version: 7.4.32
PHP Post Max Size: 64 MB
PHP Time Limit: 50000
PHP Max Input Vars: 5000
cURL Version: 7.64.0
OpenSSL/1.1.1n

SUHOSIN Installed: –
MySQL Version: 5.7.38-log
Max Upload Size: 64 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Database

WC Database Version: 7.1.0
WC Database Prefix: tma_
Total Database Size: 4.68MB
Database Data Size: 3.19MB
Database Index Size: 1.49MB
tma_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
tma_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
tma_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
tma_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
tma_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
tma_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
tma_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
tma_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
tma_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
tma_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
tma_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
tma_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
tma_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
tma_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
tma_actionscheduler_actions: Data: 0.02MB + Index: 0.13MB + Engine InnoDB
tma_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
tma_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
tma_actionscheduler_logs: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
tma_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
tma_comments: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
tma_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
tma_options: Data: 2.19MB + Index: 0.06MB + Engine InnoDB
tma_postmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
tma_posts: Data: 0.03MB + Index: 0.06MB + Engine InnoDB
tma_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
tma_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
tma_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
tma_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
tma_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
tma_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
tma_wc_admin_notes: Data: 0.08MB + Index: 0.00MB + Engine InnoDB
tma_wc_admin_note_actions: Data: 0.05MB + Index: 0.02MB + Engine InnoDB
tma_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
tma_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
tma_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
tma_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
tma_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
tma_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
tma_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
tma_wc_product_attributes_lookup: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
tma_wc_product_download_directories: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
tma_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
tma_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
tma_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
tma_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
tma_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB

Post Type Counts

attachment: 3
customize_changeset: 1
page: 7
post: 1
product: 4
product_variation: 3
revision: 1
shop_order: 1

Security

Secure connection (HTTPS): ✔
Hide errors from visitors: ❌Error messages should not be shown to visitors.

Active Plugins (2)

ManageWP - Worker: by GoDaddy – 4.9.15
WooCommerce: by Automattic – 7.1.0

Inactive Plugins (10)

Admin Menu Editor: by Janis Elsts – 1.10.4
Advanced Custom Fields PRO: by WP Engine – 6.0.4
All-in-One WP Migration: by ServMask – 7.67
All-in-One WP Migration Unlimited Extension: by ServMask – 2.47
Classic Editor: by WordPress Contributors – 1.6.2
Cookie Bar: by Brontobytes – 2.0
Custom Post Type UI: by WebDevStudios – 1.13.1
LiteSpeed Cache: by LiteSpeed Technologies – 5.3
Really Simple SSL: by Really Simple Plugins – 6.0.10
WP Reset: by WebFactory Ltd – 1.95

Must Use Plugins (1)

ManageWP - Worker Loader: by GoDaddy –

Settings

API Enabled: –
Force SSL: –
Currency: GBP (£)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: –
Enforce Approved Product Download Directories: –

WC Pages

Shop base: #14 - /shop/
Basket: #15 - /basket/
Checkout: #16 - /checkout/
My account: #17 - /my-account/
Terms and conditions: ❌ Page not set

Theme

Name: Twenty Twenty-Three
Version: 1.0
Author URL: https://en-gb.wordpress.org
Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build
personally we recommend using a child theme. See: How to create a child theme

WooCommerce Support: ✔

Templates

Overrides: –

Admin

Enabled Features: activity-panels
analytics
coupons
customer-effort-score-tracks
experimental-products-task
experimental-import-products-task
experimental-fashion-sample-products
shipping-smart-defaults
shipping-setting-tour
homescreen
marketing
multichannel-marketing
mobile-app-banner
navigation
onboarding
onboarding-tasks
remote-inbox-notifications
remote-free-extensions
payment-gateway-suggestions
shipping-label-banner
subscriptions
store-alerts
transient-notices
woo-mobile-welcome
wc-pay-promotion
wc-pay-welcome-page

Disabled Features: minified-js
new-product-management-experience
settings

Daily Cron: ✔ Next scheduled: 2022-11-16 14:29:14 +00:00
Options: ✔
Notes: 94
Onboarding: completed

Action Scheduler

Complete: 33
Oldest: 2022-11-10 12:45:13 +0000
Newest: 2022-11-16 13:25:07 +0000

Pending: 2
Oldest: 2022-11-16 13:41:24 +0000
Newest: 2022-11-17 08:29:53 +0000

Status report information

Generated at: 2022-11-16 13:40:37 +00:00
`

[gigitux]

Hi @themightyant,
thanks for opening this issue!

Since this issue is replicable only on specific screen sizes and Storefront is in maintenance mode, at least for now, we will not work on this issue.

[themightyant]

Hi @gigitux
thanks for the reply. That's a shame.

However i'd add that on further testing this seems to be happening at 38.5% of the viewport sizes above 767px, it's 5 of every 13, meaning it isn't a negligible amount.

e.g.
Screen size in PX and if issue is happening Y/N
768 N
769 N
770 Y
771 Y
772 N
773 N
774 Y
775 N
776 N
777 Y
778 N
779 N
780 Y

This exact same pattern (NNYYNNYNNYNNY) repeats 781-793 and again for other sections I have tested suggesting it is failing 38.5% of the time above 767px.