search

woocommerce / storefront

Official theme for WooCommerce
https://wordpress.org/themes/storefront/
960 stars 472 forks source link

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

Open themightyant opened 1 year ago

themightyant commented 1 year ago

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

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:

WordPress Environment

` ### 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 commented 1 year ago

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 commented 1 year ago

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.